Jquery .toggle .animate

Question

我想.toggle一个.animation。您能帮我找出为什么jquery代码不能工作吗？

小提琴在这里

$(document).ready(function() {
$('.adiv').toggle(
   function(){
    $(this).animate({
        width: "150",
        height: "150",
    }, 1000);
    },
    function(){
    $(this).animate({
        width: "77", 
        height: "77",
    }, 1000);        
});
});

谢谢你的帮忙!

Answer 1

http://jsbin.com/sirodego/1/edit

$('#toggle').toggle(function(){
    $(this).animate({
       width: "150",
       height: "150",
    }, 1000);
  },function(){
 $(this).animate({
     width: "77", 
     height: "77",
 }, 1000);        
});

这很好，对于第一个条件，要么隐藏，要么显示哪个将是第一个动画，然后做相反的将是第二个动画。

如果你需要做更多的事，请告诉我。我的小提琴告诉你发生了什么。

Answer 2

注意:你的代码很好用！问题非常简单:在您的jsfiddle中，您忘记导入jquery！使用左边的侧边栏，然后再试一次！

顺便说一下，我的解决方案是使用mouseover和mouseout：

演示

$(document).ready(function() {
$('.adiv').mouseover(function()
     {$(this).animate({
            width: "150",
            height: "150"
        }, 1000);
    }).mouseout(
    function(){
        $(this).animate({
            width: "77", 
            height: "77"
        }, 1000);        
});
});

Answer 3

试试这段代码

$(document).ready(function() {
    $('.adiv').click( function(){
    if($(this).hasClass('active')){
        $(this).animate({
            width: "30",
            height: "30",
        }, 1000);
    $(this).removeClass('active');
    }  
    else{
        $(this).animate({
            width: "150", 
            height: "150",
        }, 1000);
    $(this).addClass('active');        
     };
  });      
});

检查这个演示