JQuery 切换帮助

Question

这里的代码会打开一个 div 并对其进行动画处理.. 对吗？ 是的，这对我来说很好......

jQuery("a.trigger").click(function(){
    $("#main").animate({
      height: "+=300px"
    }, 1500 );
    return false;
});

我的问题是，我该如何切换它？ 我可以打开它，但我如何关闭它......意味着......高度滑动 200 像素。 你懂我的意思吗？ 我点击“阅读更多”（a.trigger），它动画高度+200px..但我也想把它动画回-200px。

我被困住了，因为我不是 jquery 专家。 我尝试使用 SlideToggle 或切换，但它对我不起作用....

谢谢你的帮助！

Answer 1

mabey 通过设置一个包含 state 的 class

jQuery("a.trigger").click(function(){
    if (!$("#main").is(".open")) {
        $("#main").animate({
            height: "+=300px"
        }, 1500 ).addClass('open');
    } else {
        $("#main").animate({
            height: "-=300px"
        }, 1500 ).removeClass('open');
    }
    return false;
});

Answer 2

您正在寻找拨动开关 function。

jQuery("a.trigger").toggle(function(){
  $("#main").animate({
    height: "+=300px"
    }, 1500 );
    return false;
  }, function(){
  $("#main").animate({
    height: "-=300px"
  }, 1500 );
  return false;
});

Answer 3

jQuery("a.trigger").toggle(function()
{
    $("#main").animate (... height+=300));
}, function()
{
    $("#main").animate (... height-=300));
});

或者，您可以使用 slideToggle：

jQuery("a.trigger").click(function(){ $("#main").slideToggle(); });

Answer 4

如果我没看错，那么这就是你想要做的。

http://jsfiddle.net/JqN4p/

Answer 5

jQuery("a.trigger").click(function(){
   if( $("#main").hasClass('active') )
        value  = -300;
   else
      value = 300; 
    $("#main").addClass('active').animate({
      height: "+=" + value + 'px'
    }, 1500 );
    return false;
});

这是一个工作小提琴http://jsfiddle.net/QVJPZ/

Answer 6

jQuery slideToggle 会很好地为您做到这一点：

$('a.trigger').click(function() {
  $('#main').slideToggle('slow', function() {
    // Animation complete.
  });
});

http://api.jquery.com/slideToggle/