CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseover
UdSSR
UdSSR

Reputation: 45

JavaScript / jQuery mouseover event with delay

I have a code that allows me to show hidden divs after a little delay on mouseover, my problem now is that im not very good with CS, i have elements in that div with that code:

$(document).ready(function() {
  var timer;
  var delay = 250;
  $("#content1").mouseover(function() {
    timer = setTimeout(function() {
      $("#content.left1").css("display", "block");
    }, delay);
  });
  $("#content1").mouseout(function() {
    $("#content.left1").css("display", "none");
    clearTimeout(timer);
  });
});
.txtmiddle {
  border: 1px solid rgba(215, 215, 215, 0.1);
  background-color: rgba(245, 245, 245, 0.7);
  margin-top: 5px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  padding: 2%;
  border-radius: 15px;
  position: relative;
  overflow: auto;
  -webkit-animation: fadeIn 0.1s;
  animation: fadeIn 0.1s;
}
.txtmiddle:hover {
  border: 1px solid rgba(55, 55, 55, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  filter: alpha(opacity=100);
}
#content {
  display: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
#txtleft {
	width: 30%;
	float: left;
	margin-left: 4%;
	border-top: 1px solid rgba(0, 0, 0, 0.0);
}
  <div id="txtleft"><div id="content" class="left1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</div>  </div>
  <div id="middlewrapper"><div class="txtmiddle" id="content1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1">
</div>  </div>

cant get it to run here.... but its working fine my only problem is now that everytime i hover over elements (those images) in the div the hidden content is (re-)shown again (with that delay) (before i didnt had the delay so the hidden element wouldnt disapear and apear again and one couldnt notice the change...

Upvotes: 0

Views: 3140

Answers (3)

Domain
Domain

Reputation: 11808

As correctly said by atinder fadeIn and fadeOut functions of jQuery will serve your need:

Try the below code:

jQuery(document).ready(function() {
var delay = 1000;//the delay interval
jQuery("#content1").mouseover(function() {     
  jQuery( "#content.left1" ).fadeIn(delay);
});
jQuery("#content1").mouseout(function() {    
   jQuery( "#content.left1" ).fadeOut(delay);
   });
});

Hope it helps..

Upvotes: 2

Ash
Ash

Reputation: 2108

I would usually use jQuery hover() to achieve what you are looking for:

$(document).ready(function () {
    var timeout;

    $("#content1").hover(function () {
        timeout = setTimeout(function () {
            $("#content.left1").css("display", "block");
        }, 250);
    },
    function () {
        clearTimeout(timeout);
        $("#content.left1").css("display", "none");
    });
});

Demo here.

Upvotes: 2

atinder
atinder

Reputation: 2090

why not simply use fadeIn('slow') and fadeOut('slow') instead

Upvotes: 2

Related Questions