Commax89 Commax89 - 4 years ago 247
Javascript Question

jQuery .mouseover() (.mouseout) div is flickering

i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).

$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});


Part of the code is commented since I tried more ways.

What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.

Answer Source

try this:

$(document).ready(function() {  
    $(".bulletProj,.caption").mouseenter(function() {              
         $(".caption").toggle();        
    }).mouseleave(function () {     
        $(".caption").hide();
    });
});

working fiddle here: http://jsfiddle.net/r2y8J/4/

I hope it helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download