CODEWITHSUNDEEP
javascriptjquery
sachin11
sachin11

Reputation: 1167

Hide a div on mouseover

I am creating a slideshow using jquery based on the code given here - http://snook.ca/archives/javascript/simplest-jquery-slideshow

This is the sample code: 

<html>
<head>
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});



</script>
</head>
<body>
<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<a href="#"><img id="try" src="http://freeimagesarchive.com/data/media/29/12_sky.jpg" /></a>
</body>
</html>

What I want is, when I hover over the image with the id try, the slideshow should get hidden for a certain duration and show a static image instead and regains the slideshow after few moments..I am pretty novice in jquery, can someone help me out in this?? Thanx..

Upvotes: 1

Views: 259

Answers (2)

bdparrish
bdparrish

Reputation: 2764

Using the jQuery .delay() you can hide the entire .fadein div for however many seconds you want.

jsFiddle solution

Upvotes: 0

user405398
user405398

Reputation:

If i understood your requirement correctly,

this fiddle has the solution.

I just added two event listeners(mousenter, mouseleave) for image element try and used 2 variables to keep track of hover state & slide show image source.

var tryHovered = false;
var actualSrc = '';
$('.fadein img:gt(0)').hide();
setInterval(function() {
if(!tryHovered){
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
}, 3000);



$('#try').mouseenter(function(e) {
     tryHovered = true;
     actualSrc = $('.fadein :first-child').attr('src');
    $('.fadein :first-child').attr('src', this.src);//Replace this.src with any other static image path that you want to display.
}).mouseleave(function(e) {
     tryHovered = false;
     $('.fadein :first-child').attr('src', actualSrc);
});​

Upvotes: 1

Related Questions