Jquery CSS mouse hover animation not working smoothly

2
votes

I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:

       $('#disclaimer').hover(
            function () {
                $('#wrapper').addClass('hovered');
            }, function () {
                $('#wrapper').removeClass('hovered');
            }
        );

But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.

Any suggestions?? this is my JsFiddle code.

4
javascriptjquery
Is this fiddle doing what you want? – blex
Note that the #headline3Txt element in the fiddle is not closed – adeneo
well your solution is working fine but when i move mouse over details text then it turns black and it remains black when mouse is moved wherever in the container. I dont want this i want container to turn black only mouse is over details text and once it is moved away from the details text then it should turn normal – user3754380
Ok, then, try this – blex
can you tell me what changes you have made? – user3754380

4 Answers

1
votes

When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.

As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.

Also, to avoid the #disclaimer to move around, make it position:absolute;.

Here is the JS Fiddle

CSS

.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText {  opacity:0; }
.hovered #disclaimer {  opacity:0; }

#disclaimer {
    /* ... */
    position:absolute;
    top: 168px;
    left: 235px;
}
0
votes

I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.

You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.

0
votes

The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!

You can fix this, by changing disclaimer hover part with this:

$('#disclaimer').mouseenter(
            function (e) {
                $('#wrapper').addClass('hovered')
                .mouseleave(function () {
                    $('#wrapper').removeClass('hovered');
                })
            });

So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.

Here is the result http://jsfiddle.net/r3BTU/2/

0
votes

You can set up to classes (a hidden and a visible) and the switch between the classes with js.

var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){    
    movingElement.className="class2";    
};
disclaimer.onmouseout= function(){    
    movingElement.className="class1";   
};

You can add trasitions in the css so the visible class "fades" in. Here's a Demo: http://jsfiddle.net/Nillervision/eSbzg/