JQuery切换帮助

这里的代码打开一个div并为其设置动画..对吗？是的，这对我很好...JQuery切换帮助

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

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

而我被卡住了，因为我不是jQuery专家。我试图使用SlideToggle或切换，但它并没有为我工作....

感谢您的帮助！

来源

2011-05-03 Marek123

这无关你的问题，但'return false'是隐含的，因为JavaScript是多余的如果不从函数返回值，则返回'undefined'，并且'false'和'undefined'都是falsy值。 – 2011-05-03 11:25:00

如果我正确地读这篇文章，那么这就是你想要什么做。

http://jsfiddle.net/JqN4p/

来源

2011-05-03 11:25:34 netbrain

当然，但我的div有一个固定的高度设置....这是一个问题？ – Marek123 2011-05-03 11:27:35

不，它不会，如下所示：http://jsfiddle.net/JqN4p/1/ – netbrain 2011-05-03 11:29:50

不，我的意思是inital状态...该div已经470px，我想扩大约。 300px更多（滑动） – Marek123 2011-05-03 11:31:39

玛贝通过设置保持状态

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; 
});

来源

2011-05-03 11:23:40 DanielB

会尝试！ thx – Marek123 2011-05-03 11:25:03

完美！它工作得很好！正是我想要的。 :) – Marek123 2011-05-03 11:26:07

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

或者您可以使用的slideToggle类：

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

来源

2011-05-03 11:24:26

也与固定的高度为div？我的#main div在css中的起始高度为472px？ – Marek123 2011-05-03 11:28:08

如果你想让你的div部分滑落，那么你应该去找第一个代码，如果你想让它完全滑下来，第二个代码可以工作。 – 2011-05-03 11:32:23

您正在寻找的切换功能。

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

来源

2011-05-03 11:29:57 graydot

也适用，thx :) – Marek123 2011-05-03 11:38:12

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/

来源

2011-05-03 11:34:43 Andre

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

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

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

来源

2011-05-03 11:34:53 Craig

JQuery切换帮助

回答

相关问题