[英]image transition for javascript
I have an image tag that can change image once hovered over. 我有一个图片标签,可以将图片悬停在上面。 I would like to make this transition smooth.
我想使过渡顺利进行。 Something like a fade into the next image.
就像淡入下一张图像一样。 This is the code I have now:
这是我现在拥有的代码:
$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
src: $(this).attr('data-other-src')
, 'data-other-src': $(this).attr('src')
})
});
I am a total beginner for javascript 我是javascript的初学者
change the ms values for faster/slower transition, fades out then back in 更改ms值以进行更快/更慢的过渡,淡出然后再返回
$('img').bind('mouseenter mouseleave', function() { var self = $(this); self.fadeTo(1000, 0.30, function() { self.attr({ src: self.attr('data-other-src'), 'data-other-src': self.attr('src') }); }).fadeTo(500, 1); });
Replacing the src
attribute is "brutal": you cannot transition that. 替换
src
属性为“ brutal”:您无法进行转换。
In order to do this, you need your 2 images exist in the DOM at least during the transition. 为此,至少在过渡期间,您需要在DOM中存在2个图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.