JQuery 切换帮助

Question

这里的代码打开一个 div 并为其设置动画..对吧？是的，这对我来说很好......

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

我的问题是，我如何切换它？我可以打开它，但我如何关闭它...意味着...向上滑动 200px 高度。你知道我的意思吗？ 我单击“阅读更多”(a.trigger)，它会将高度动画设置为+200px..但我也想将其动画设置回-200px。

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

感谢您的帮助！

Answer 1

也许通过设置一个持有状态的类

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

您正在寻找切换功能。

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

Answer 3

如果我正确地阅读了这篇文章，那么这就是您想要做的。

http://jsfiddle.net/JqN4p/

Answer 4

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

或者你可以使用slideToggle：

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

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/