jQuery动画切换

这是一个非常简单的问题。我基本上在页面上有一个div块，单击时，它的大小会增大，再次单击时会返回到原来的大小。我的问题是，它似乎根本没有工作。此外，我敢肯定，在这两种动画状态之间切换的方式比这样的if语句更切换，但我不知道如何去做。jQuery动画切换

$(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>

让我知道，如果需要别的。

来源

2012-02-20 Xenostar

它不工作，因为你初始化'toggle'用'0'但使用'整个代码的其余部分$ toggle'。 – 2012-02-20 18:44:00

您的代码不工作，因为你已经使用在一个地方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是here。根据所用的参数，有多种形式的.toggle（），因此在搜索jQuery文档时并不总是找到正确的。

来源

2012-02-20 18:47:54 jfriend00

谢谢，这就是我一直在寻找的。 – Xenostar 2012-02-20 19:22:26

是否可以将高度设置为“自动”高度，因此高度取决于内容而不是固定的？ – Amesey 2015-03-09 17:39:53

@Amesey - 据我所知，jQuery不能动画到“自动”高度。它需要从当前高度动画到其他已知高度。我认为你必须弄清楚如何测量汽车的高度以便制作汽车的高度。 – jfriend00 2015-03-09 21:41:40

通知

var toggle = 0;

和

if($toggle == 0){

你定义一个名为toggle变量，然后用它作为$toggle之间的差异。

来源

2012-02-20 18:43:33

尝试

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

来源

2012-02-20 18:44:18 romo

'slideToggle'显示并隐藏该元素，它不仅仅设置两个值之间的高度。 – 2012-02-20 18:45:54

+1詹姆斯....我没有足够重视。 – romo 2012-02-20 18:54:38

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

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

来源

2012-02-20 18:48:25 devstruck

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

FIDDLE

来源

2012-02-20 18:54:51 adeneo

我要捍卫你切换解决方案，它不是不正确。

在某些情况下代码只这样会正常运行，而.toggle()会做一些奇怪的事情。

改为只if($toggle == 0){...你需要使用if (toggle === 0){

来源

2014-10-10 11:29:14 wix

jQuery动画切换

回答

相关问题