Jquery为动画功能切换动作

Question

我需要将jQuery切换和动画功能链接在一起。当我点击框时，其大小应该改变。我的代码js fiddles snip就在这里。为什么它不起作用？它在启动时消失。

JS Fiddle snip

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

Answer 1

切换会隐藏/显示您元素，是因为你的元素是可见的初始加载第一次您切换函数被调用，将动画但随后的切换将设置在显示器无元素导致它隐藏。你不应该为此使用切换功能。

你应该使用这样的事情：

$(document).ready(function() { 
    var big = false; 
    $('.adiv').on('click', function(){ 
     if(big) { 
      $(this).animate({ 
        width: "77", 
        height: "77", 
       }, 1000);   
     } else { 
      $(this).animate({ 
        width: "150", 
        height: "150", 
       }, 1000); 
     } 
     big = !big; 
    }); 
}); 

这里是一个工作示例：http://jsfiddle.net/x7f34vr5/1/

Answer 2

您需要分配一个单击处理程序，或者它只是运行的时候了。例如。

$('.adiv').click(function() { 
// Do stuff here 
}); 

切换和动画真的不一起去 - 这里是做不同的方式：

$(document).ready(function() { 
    $('.adiv').click(function() { 
     var newSize = $(this).width() > 77 ? 77 : 150; 

     $(this).animate({ 
      width: newSize, 
      height: newSize, 
     }, 1000); 
    }); 
}); 

Fiddle here。