Question

我正在尝试实现页面导航，其中涉及div动画到顶部或底部，具体取决于所选的链接。所以假设你有链接1，链接2和链接3。

如果您当前正在查看链接1的内容并选择链接2，则内容会向上滑动。如果您当前正在查看链接2的内容并选择链接1，则内容会向下滑动。

我目前正在使用这段代码，它通过不透明度来激活div进出动画，我这样做是为了让自己走上正确的轨道，我希望这可以很容易地转换为功能我我正在寻找。

var $btns = $('.nav a'), $slides = $('.slides > .content');



$btns.click(function(){

  //add 'active' class to active link
  $(this).addClass('active');

  //remove 'active' class from previous link
  $(this).parent().siblings().find('a').removeClass('active');

  //Animate Divs
  $slides.eq($btns.index(this)).animate( {"opacity": "1"}, "slow").siblings().animate( {"opacity": "0"}, "slow");
  siblings().hide('fast');

  return false;
});

//First link clicked on page load
$btns.first().click();

$btns.click(function(){ //add 'active' class to active link $(this).addClass('active'); //remove 'active' class from previous link $(this).parent().siblings().find('a').removeClass('active'); //Animate Divs $slides.eq($btns.index(this)).animate( {"opacity": "1"}, "slow").siblings().animate( {"opacity": "0"}, "slow"); siblings().hide('fast'); return false; }); //First link clicked on page load $btns.first().click();

我知道我可以使用animate（）并为css top属性设置动画，但我似乎无法让它正常工作。这个位置是关闭的，通常过渡是不稳定的。一旦页面安装到位，我也有兴趣将div滑出。是否有一个jquery函数，在前一个动画完成之前不允许执行下一个动画？

使用动画从上到下或从下到上的页面导航

0 个答案: