jQuery .toggle。动画

Question

我想切换一个动画。 您能帮我弄清楚为什么这个jquery代码不起作用吗？

在这里摆弄

$(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！ 使用左侧的侧边栏，然后重试！

顺便说一下，这是我使用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 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');        
     };
  });      
});

检查此演示