我如何更改帶有動畫的圖片的尺寸

-4

我有10個元素（圖片）的這個功能，我需要點擊每個元素，然後增長，然後當我點擊另一個調整回到原來的尺寸和增長最後的我「已經clicked.Heres一些代碼：我如何更改帶有動畫的圖片的尺寸

var Answers = new Array(); 
var growing = true; 

$(Answers).click(function(e){ 
    if(growing) 
     $(e.target).animate({width:'400px'}, 500, function(){ 
     }); 
    else 
     $(e.target).animate({width:'360px'}, 500, function(){ 
     }); 
    growing=!growing; 
}); 

for (var i = 0; i < 10; i++) { 
     var elemente = document.getElementById("simbol" + i); 
     Answers.push(elemente); 
    }

來源

2014-04-01 user3459377

請讓我們知道您嘗試過的內容，如果可能的話創建一個JSFiddle，以便我們可以一起解決方案。 – kmoe

你需要綁定點擊事件AFTER數組被填充，而不是BEFORE！ –

@ martincarlin87這裏OP是解析一個DOM節點數組到一個jQuery對象，即使沒有更好的方式做這個肯定 –

你應該添加一個類每辛博爾*元素，那麼你就可以通過增加選擇綁定處理器未來的元素。

$(document).on('click', '.simbol', function() { ... });

要正確地增長/收縮的元素，（恕我直言）它應該是這個樣子：

$('.simbol').not(e.target).animate({width:'360px'}, 500);//shrink all except the clicked one 
$(e.target).animate({width:'400px'}, 500); //grow the clicked one

但是它會更好地與CSS3做到這一點：

//jQuery 
$('.simbol').removeClass('grow'); 
$(e.target).addClass('grow'); 

/* CSS3 */ 
.simbol { width: 360px; transition: width 0.5s;} 
.simbol.grow { width: 400px; }

來源

2014-04-01 13:05:15

更新小提琴：http://jsfiddle.net/nothrem/MruMR/9/ –

它與css3很好 – user3459377

這是更好的版本，你可以取消選擇：http://jsfiddle.net/nothrem/MruMR/10/ –

我如何更改帶有動畫的圖片的尺寸

回答

相關問題