it might be simple but I can't find the solution. Is it possible (in a easy way!) to add a jquery fadeIn and fadeOut effect to this image hover sript?
$('img[data-hover]').hover(function() {
$(this)
.attr('tmp', $(this).attr('src'))
.attr('src', $(this).attr('data-hover'))
.attr('data-hover', $(this).attr('tmp'))
.removeAttr('tmp');
}).each(function() {
$('<img />').attr('src', $(this).attr('data-hover'));
});
<img src="image1.jpg" data-hover="image2.jpg">
Set the img
tag to the desired starting opacity using CSS, and add this to your code:
$('img[data-hover]').mouseover(function() {
$(this).fadeTo("slow", 1);
}
$('img[data-hover]').mouseout(function () {
$(this).fadeTo("slow", 0.25); // where 0.25 is the desired starting opacity
}
Take a look at the .fadeTo() API documentation since you will probably want to tweak this.
You might want to take a look at this:
http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
I think this is what you want ?
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
HTML:
<img src="image1.jpg" alt="" class="a" />
<img src="image2.jpg" alt="" class="b" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.