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。