为 div 制作动画并使其滑落

Question

作为新的 jQuery，我无法组合代码来使 div 动画从左侧到右侧，然后向下滑动。滑动之前 div 的高度约为 10px，然后滑动到其全高 351px。 我可以设法单独执行上述操作，但不能组合执行！希望能得到一点指导，谢谢。 这是我当前的代码；

$.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();

};

Answer 1

您是否尝试过将两种效果链接在一起？将它们分成两个 animate() 函数，然后按照您想要的顺序链接它们：

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

每个 animate() 函数都按顺序运行，因此您可以一个接一个地执行任意数量的效果。

Answer 2

如果您希望一个动画在另一个动画完成后触发，请使用 .animate 的回调：

伪代码：

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