Question

我有10个元素（图像）的这个功能，我需要点击每个并增长升技然后当我点击另一个调整大小回到其原始维度并增长最后我点击了。有一些代码：

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

Answer 1

您应该为每个simbol *元素添加一个类，然后您可以通过添加选择器将处理程序绑定到将来的元素。

$(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; }

如何用动画改变图片的维度

1 个答案: