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代码很简单

 
Click Me 

如果还有其他需要，请告诉我。

Answer 1

您的代码无法正常工作，因为您曾在一个地方使用toggle ，而在另一个地方使用$toggle 。

但是，这可以更简单地完成，如下所示：

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

这里的工作演示： http ： //jsfiddle.net/jfriend00/5Wu6m/

当给定函数列表作为参数时， .toggle(fn1, fn2)方法将在从第一个函数开始给出的函数之间交替。 这会自动跟踪您的切换状态 – 您不必这样做。

jQuery doc就在这里 。 根据所使用的参数，有多种forms的.toggle（），因此在搜索jQuery文档时，您并不总能找到正确的参数。

Answer 2

注意之间的区别

 var toggle = 0; 

和

 if($toggle == 0){ 

您定义一个名为toggle的变量，然后将其用作$toggle 。

Answer 3

尝试

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

Answer 4

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

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

Answer 5

 var H=H==200?100:200; $(".login").on('click', function(){ $(this).animate({height: H}, 500, function() {H=H==200?100:200;}); }); 

小提琴

Answer 6

我想捍卫你的切换解决方案，这不是不正确的。

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

只代替if($toggle == 0){...你需要使用if ( toggle === 0 ){