jQuery动画切换

这是一个相当直接的问题。我基本上在一个页面上有一个div块，当单击时，它的大小会增加，当再次单击时，它会返回到原来的状态。我的问题是它根本不起作用。另外，我确信有一种比像这样的if语句更简洁的方式在两个动画状态之间切换，但我不确定具体怎么做

$(document).ready(function(){
    var toggle = 0;
    $(".login").click(function(){
        if($toggle == 0){
            $(this).animate({
                height: '200',
            }, 500, function(){
            });
            $toggle = 1;
        }
        else if($toggle == 1){
            $(this).animate({
                height: '100',
            }, 500, function(){
            });
            $toggle = 0;
        }
    });
});

相应的html代码非常简单

<div class="login">Click Me</div>

点击我

---

如果还需要什么，请告诉我。

注意

var toggle = 0;

及

---

定义一个名为

toggle

的变量，然后将其用作

$toggle

注意

var toggle = 0;

及

定义名为

toggle

的变量，然后将其用作

$toggle

尝试

$(".login").click(function(){
    $(this).slideToggle(500);
}

试一试

---

您的代码不起作用，因为您在一个位置使用了

toggle

，在另一个位置使用了

$toggle

但是，可以这样做：

$(document).ready(function(){
    $(".login").toggle(function() {
        $(this).animate({height: '200'});
    }, function() {
        $(this).animate({height: '100'});
    });​
});

在此进行工作演示：

当给定一个函数列表作为参数时，

.toggle（fn1，fn2）

方法将在从第一个函数开始的给定函数之间交替使用。这会自动为您跟踪切换状态-您不必这样做

---

jQuery文档是。.toggle（）有多种形式，具体取决于所使用的参数，因此在搜索jQuery文档时，您并不总能找到正确的形式。

您的代码不起作用，因为您在一个位置使用了

toggle

，在另一个位置使用了

$toggle

但是，可以这样做：

$(document).ready(function(){
    $(".login").toggle(function() {
        $(this).animate({height: '200'});
    }, function() {
        $(this).animate({height: '100'});
    });​
});

在此进行工作演示：

当给定一个函数列表作为参数时，

.toggle（fn1，fn2）

方法将在从第一个函数开始的给定函数之间交替使用。这会自动为您跟踪切换状态-您不必这样做

---

jQuery文档是。.toggle（）有多种形式，具体取决于所使用的参数，因此在搜索jQuery文档时，您并不总能找到正确的形式。

我发现了两个问题。一个是切换变量的范围。另一个是动画属性列表中单个属性之后的公共属性。试试这个：

$(document).ready(function(){
    $(".login").click(function(){
        if($(this).hasClass('expanded')){
            $(this)
                .removeClass('expanded')
                .stop()
                .animate({height: '100px'}, 500)
            ;   
        }
        else{
            $(this)
                .addClass('expanded')
                .stop()
                .animate({height: '200px'}, 500)
            ;                
        }
    });
});

---

我看到两个问题。一个是切换变量的范围。另一个是动画属性列表中单个属性之后的公共属性。试试这个：

$(document).ready(function(){
    $(".login").click(function(){
        if($(this).hasClass('expanded')){
            $(this)
                .removeClass('expanded')
                .stop()
                .animate({height: '100px'}, 500)
            ;   
        }
        else{
            $(this)
                .addClass('expanded')
                .stop()
                .animate({height: '200px'}, 500)
            ;                
        }
    });
});

---

我想为您的切换解决方案辩护，它没有错

在某些情况下，只有这种方式的代码才能正常工作，而

.toggle（）

会做一些奇怪的事情

---

如果（$toggle==0）{…您需要使用

而不是
如果（toggle==0）{
我想为您的切换解决方案辩护，这是正确的

在某些情况下，只有这种方式的代码才能正常工作，而
.toggle（）
会做一些奇怪的事情

仅当（$toggle==0）{…

需要使用

if（toggle==0）而不是
if（toggle==0）{
它不起作用，因为您使用
0
初始化
toggle
，但在其余代码中使用
$toggle
。它不起作用，因为您使用
0
初始化
toggle
，但在其余代码中使用
$toggle
。
slideToggle
显示并隐藏元素，它不只是设置两个值之间的高度。
slideToggle
显示和隐藏元素，它不只是设置两个值之间的高度。谢谢，这就是我一直在寻找的。有没有可能将高度动画化为“自动”高度，因此高度取决于内容而不是固定的？@Amesey-据我所知，jQuery无法确定nimate设置为“自动”高度。它需要从当前高度设置为其他已知高度的动画。我想你必须弄清楚如何测量自动高度才能设置为动画。好的，但是你如何使用
.on（'mouseover'，…
？@cbmtrx-使用
.on（'mouseover'，…）实现这一点
？请提出一个新问题，您可以在其中描述您尝试执行的操作的详细信息。也许您正在寻找jQuery的
。hover（）
？谢谢，这就是我一直在寻找的。有没有可能将高度设置为“自动”高度，因此高度取决于内容而不是固定的？@Amesey-据我所知，jQuery无法设置为“自动”高度的动画高度。它需要从当前高度设置动画到其他已知高度。我认为您必须了解如何测量自动高度才能设置动画。好的，但是如何使用
。on（'mouseover'，…
？@cbmtrx-使用
。on（'mouseover'，…）执行此操作
？请提出一个新问题，您可以在其中描述您尝试执行的操作的详细信息。也许您正在寻找jQuery的
。hover（）
？