动画div并使其向下滑动

问题描述

| 作为新的jQuery，我无法合并代码以使div从左手到右动画，然后向下滑动。向下滑动前div的高度约为10像素，然后向下滑动至其全高351像素。 我可以单独完成上述操作，但不能合并执行！请多加指导，谢谢。 这是我当前的代码；

$.hideAllExcept = function(tabs,Boxes){
function init() {

  // make it bookmarkable/refreshable. but,no history.
  var hash = window.location.hash;
  (!hash) ? hideShow(\'#\' + $(Boxes+\':first\').attr(\'id\')) : hideShow(window.location.hash);

  // add click handler.

  $(tabs).click(function(e) {
    e.preventDefault();
    var href = $(this).attr(\'href\');
    // add back the hash which is prevented by e.preventDefault()
    window.location.hash = href;
    hideShow(href);
  });
}

function hideShow(el) {


    $(Boxes).animate({\"left\": \"-650px\"},\"slow\");
     $(el).fadeIn(\'slow\').animate({\"left\" : \"60%\",height:\"351\" },1000);

$(tabs).removeClass(\'active\');
      $(\'a[href=\"\' + el + \'\"]\').addClass(\'active\');
    }
    init();

};

取得了一点进步！ 我已经在临时服务器上运行它： http://www.tridentsolutions.co.nz/test-folder/index.html#construction_home 但是我无法回到LHS的框，也无法看到文本的可见性，因为文本在html中而不是div中的图像，这是否意味着我无法隐藏文本？ 提前致谢

(function($){

$.hideAllExcept = function(tabs,Boxes){
    function init() {

      // make it bookmarkable/refreshable. but,no history.
      var hash = window.location.hash;
      (!hash) ? hideShow(\'#\' + $(Boxes+\':first\').attr(\'id\')) : hideShow(window.location.hash);

      // add click handler.

      $(tabs).click(function(e) {
        e.preventDefault();
        var href = $(this).attr(\'href\');
        // add back the hash which is prevented by e.preventDefault()
        window.location.hash = href;
        hideShow(href);
      });
    }

 function hideShow(el) {

     $(el).animate({\"left\": \"-650px\"},\"slow\").fadeIn(\'slow\');
    $(el).fadeIn(\'slow\').animate({\"left\" : \"60%\" },1000).animate({\"height\" : \"351\" },1000);


$(tabs).removeClass(\'active\');
      $(\'a[href=\"\' + el + \'\"]\').addClass(\'active\');
    }
    init();

};

    

解决方法

        您是否尝试过将两个效果链接在一起？将它们分成两个animate（）函数，然后按所需顺序链接它们：

$(el).fadeIn(\'slow\').animate({\"left\" : \"60%\"},1000).animate({\"height:\"351\" },1000);

每个animate（）函数均按顺序运行，因此您可以一个接一个地执行任意数量的效果。     ,        如果您希望一个动画在另一个动画结束后触发，请使用.animate \的回调： 伪ish代码：

$(selector).animate({ key: val },\'slow\' /*easing*/,function() {
                          // second animation goes here
                     });