Jquery:
var picname = ["1.jpg"];
var pics = 0;
$("#pic").mouseenter(function() {
$("#pic").fadeOut(300, function() {
$("#pic").attr("src", picname[pics]);
pics++;
if (pics > 2) {pics = 0;}
$("#pic").fadeIn(500);
});
});
$("#pic").mouseleave(function() {
$("#pic").fadeOut(300, function() {
$("#pic").attr("src", picname[pics]);
pics++;
if (pics > 2) {pics = 0;}
$("#pic").fadeIn(500);
});
});
Html:
<img id= 'pic' src="1.jpg"/>
I want to repeat itself for exemple when I put my mouse on that picture it changes and when I leave the mouse it become to normal and this repeats itself.
If you want it to cycle between 2 pictures, you dont need the array with picture names. just do it like this:
$("#pic").mouseenter(function() {
$("#pic").fadeOut(300, function() {
$("#pic").attr("src", "http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13734.jpg");
$("#pic").fadeIn(500);
});
});
$("#pic").mouseleave(function() {
$("#pic").fadeOut(300, function() {
$("#pic").attr("src", "http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13529.jpg");
$("#pic").fadeIn(500);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='pic' src="http://images.all-free-download.com/images/graphiclarge/banana_clip_art_13529.jpg" />Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments