如何使用动画更改图片的尺寸

Posted 2023-05-08

【中文标题】如何使用动画更改图片的尺寸

【英文标题】：How can i change dimension of picture with animate

【发布时间】：2014-05-12 05:53:43

【问题描述】：

我有 10 个元素（图像）的此功能，我需要单击每个元素并增长一点，然后当我单击另一个元素以调整其原始尺寸并增长我单击的最后一个元素时。以下是一些代码：

编辑： http://jsfiddle.net/MruMR/

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

【问题讨论】：

请告诉我们您的尝试，如果可能，请创建一个 JSFiddle，以便我们共同制定解决方案。

你需要在数组填充之后绑定点击事件，而不是之前！

@martincarlin87 这里 OP 正在将一个 DOM 节点数组解析为一个 jquery 对象，这肯定不是更好的方法

我添加了一个小提琴

也许只是避免使用全局变量：jsfiddle.net/MruMR/1 但实际上，您的代码应该是这样的：$('.simbol').click(function (e) this.growing = !this.growing; $(e.target).animate( width: this.growing ? 180 : 155 , 500); ); 这就是您所需要的！ jsfiddle.net/MruMR/2

【参考方案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; 

【讨论】：

这是一个更好的版本，您可以取消选择：jsfiddle.net/nothrem/MruMR/10

最后一个小提琴很好，但我会用 css3 保留它。谢谢！