为什么此幻灯片/切换只运行一次? [英] Why does this slide/toggle only run once?

问题描述

我只是想不通，为什么此slidetoggle无法使用.它只运行一次:

I just can't figure out, why this slidetoggle does't work. It just runs once:

HTML:

<div class="text">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button">Show</div>​

CSS:

.text{
  height:0;
  overflow:hidden;
}
.heightAuto{
    height:auto;
}​

功能:

$(function(){
    $(".button").toggle(function()

        {
            var $text = $(".text");
            var contentHeight = $text.addClass('heightAuto').height();

            $text.removeClass('heightAuto').animate({ height: contentHeight}, 500);

        }, function() {

            $(".text").animate({ height: "0"}, 500);

        });
}) ; 

这是小提琴:

http://jsfiddle.net/QwmJP/10/

推荐答案

因为在第一个动画之后contentHeight变量再次为0.

beacause the contentHeight variable is 0 again, after the first animation.

如果不覆盖它，它将起作用:

if you don't overwrite it it'll work:

$(function() {
    var $text = $(".text");
    var contentHeight = $text.addClass('heightAuto').height();
    $text.removeClass('heightAuto');

    $(".button").toggle(function() {    
        $text.removeClass('heightAuto').animate({
            height: contentHeight
        }, 500);

    }, function() {

        $(".text").animate({
            height: "0"
        }, 500);
    });
});​

http://jsfiddle.net/QwmJP/13/

这篇关于为什么此幻灯片/切换只运行一次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！