Is there a way to add a delay on a hover efect?
Question
What I would like to accomplish is that when the image changes after the hover it stays like that for a few seconds, and then it returns to the original image.
What I would like to know is if there's a way to add that kind of delay. I have attached my code below.
<html>
<body>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
width='142' height='162'
onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />
</body>
</html>
5 answers
solution1
0 2016-11-01 23:51:45
Change your onmouseout event to call a JS function with setTimeout
setTimeout(function(){
this.src= "...";
}, 5000);
Where 5000 is the time in milliseconds you want to delay.
solution2
0 2016-11-01 23:55:06
You could just use CSS transitions.
.button { background-color: #222; color: #fff; padding: 14px 36px; text-decoration: none; transition: 0.6s background-color ease } .button:hover { background-color: #555; }
<a href='#' class='button'>Hover me</a>
solution3
0 2016-11-02 00:07:19
See this example to change <img> src with onmouseover event and wait 3's then get back to original image onmouseout
//copy original img to variable var original = $("img")[0].src; //mouse over event $("img").mouseover(function() { $(this).fadeOut("fast").fadeIn("fast"); //change image $(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg"; }); //mouse out event $("img").mouseout(function() { var img = $(this); //on mouse over wait 3 second and getback to original img setTimeout(function() { img.fadeOut("fast").fadeIn("fast"); img[0].src = original; }, 3000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />
solution4
0 ACCPTED 2016-11-02 00:22:00
Use CSS transitions with the transition-delay property.
.classname { width: 100px; height: 100px; background-color: red; transition-property: background-color; transition-delay: 1s; transition-duration: 0.1s; } .classname:hover { transition-delay: 0s; background-color: blue; } .image { width: 142px; height: 162px; background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'); background-size: 100% 100%; transition-property: background-image; transition-delay: 1s; transition-duration: 0.1s; } .image:hover { transition-delay: 0s; background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg') }
<div class="classname"></div> <div class="image"></div>
solution5
0 2016-11-02 00:44:51
There is a several ways to do this. You can try the snippet below:
<div>
<img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
</div>
div{
width:142px;
height:162px;
overflow: hidden; /*required*/
}
div img{
position: absolute;
transition: opacity .5s ease;
transition-delay: .5s; /*time of transition that you want*/
}
div img:hover{
opacity: 0;
}
Another way is just use a background of this images and manage each one.
Full example: jsbin
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.