Jquery .toggle .animate

Question

我想。转换.animation。你能帮我弄清楚为什么这个jquery代码不起作用吗？

Fiddle here

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

感谢您的帮助！

Answer 1

注意：您的代码效果很好！问题很简单：在你的jsfiddle中，你忘了导入jquery！使用左侧边栏再试一次！

这是我使用鼠标悬停和鼠标移动的解决方案：

Demo

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

Answer 2

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 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');        
     };
  });      
});

选中此Demo