Question

I have a div that has an opacity of 0. Now when I hover over it, the opacity changes to 1. (well known jquery stuff that I won’t paste in here). I put text in that div and it all works fine. However, whenever I put that text in a div, or inside anything basically, it changes the opacity back to 0 and then again to 1.

That’s annoying as it is, but if I just move my mouse over it to and fro, it makes it start to blink, etc. etc. How can I fix this?

The code for the opacity is this:

$(document).ready(function() {
    $(".jshover").mouseover(function() {
        $(this).animate({
            opacity: 1
        }, 300);
    }).mouseout(function() {
        $(this).animate({
            opacity: 0
        }, 300)
    });
});

Code of the div is:

<div id="ww11">
  <div id="ww11o" class="jshover">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt.
  <b>More...</b>
  </div>
</div>

Answer 1

Use the stop method to stop the blinking effect

$(this).stop().animate({...

Demo