javascript - Set time delay between two frames on mouseover -
i have display 2 images single mouseover
. when mouseover
image, first, image displayed time delay of 5000, image needed display same hover. on mouseout
display original image.
i not familiar javascript , jquery.
can please give me idea how this.
what did is,
$('.image1').mouseover(function() { setinterval($(this).removeclass(.image1).addclass('image-over1'),5000); $(this).removeclass(.image1).addclass('image-over2'); }); $('.image1').mouseout(function() { $(this).removeclass('image-over1'); $(this).removeclass('image-over2').addclass(item); }); $('.image1').click(function(){ document.location='index.php?page='index.php'; })
the .hover()
function lets specify both mouseover/mouseout @ same time, , need make function setinterval
:
$('.image1').hover(function(evt) { // mouse on function. // dom element got mouseover. var target = evt.target; if (target.timer) { cleartimeout(target.timer); target.timer = null; } target.timer = setinterval(function() { // $(this) not work here, since 'this' has changed. // depending on css shouldn't need remove '.image1' // class, make sure .image-over1 , .image-over2 // stronger selectors, or occur after .image1 $('.image1').addclass('image-over2'); // @ point element (just guessing <img>, // really: // <img class="image1 image-over1 image-over2" .../> // it's absolutely fine image have classes // long css correct. }, 5000); $('.image1').addclass('image-over1'); }, function(evt) { // mouse out function. // dom element got mouseout. var target = evt.target; if (target.timer) { cleartimeout(target.timer); target.timer = null; } $('.image1').removeclass('image-over1'); $('.image1').removeclass('image-over2'); }); $('.image1').click(function(){ document.location='index.php?page='index.php'; })
Comments
Post a Comment