jQuery:尝试为所有< img>设置动画在div中 [英] jQuery: trying to animate all <img> in a div

问题描述

在文档中遵循以下官方jQuery示例:

Following this official jQuery example in the documentation:

https://api.jquery.com/animate/

我尝试应用animate()函数的类似用法，但我想减去300个像素，但是要从每个图像的当前left属性中减去 .

I try to apply similar use of the animate() function but I would like to subtract three hundred pixels, but from the current left property of each image.

我尝试了以下操作:

$( ".instagram_grid .first" ).animate({
left: $(this img).left -300 
}

，然后完全按照示例中的步骤使用step函数，希望它应用每个图像的相同的相对定义的left属性.

and then use the step function exactly as in the example, expecting it to apply this same relatively defined left property of each image.

但是它不是有效的jQuery，或者实际上并没有任何可识别的效果.

However it isn't valid jQuery, or rather, it doesn't actually have any recognizable effect.

这是我的小提琴: https://jsfiddle.net/dueq09r6/5/

推荐答案

事物的结合-图像的左侧位置如前所述自动返回.然后$(this img)应该是$(this).find('img')，并且其位置的值应解析为整数:

Couple of things - the image's left position returned auto like mentioned before. Then $(this img) should be $(this).find('img') and the value from it's position should be parsed as an integer :

https://jsfiddle.net/dueq09r6/8/

$( ".instagram_grid .first" ).animate({
left: parseInt($(this).find('img').css('left'))-300
},

这篇关于jQuery:尝试为所有< img>设置动画在div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！