CODEWITHSUNDEEP
jquery
ACs
ACs

Reputation: 1445

jQuery triggering fadeIn and fadeOut issue

I have a container element with other elements inside it. If I move the mouse over this wrapper element I would like to fadeIn a <div> element located inside this element, and fadeOut when the mouse leaves the wrapper. My problem is that the fadeIn and fadeOut seems to be called multiple times, because the element starts blinking (fade in and out several times) as I move in or out the mouse. Here is my source code:

<div class="panel_body">
   <div class="chb_input_row">
      <div class="row_wrapper">
         <label>user</label>
         <input type="hidden" value="1" name="user_profiles">
         <input type="checkbox" value="1" name="user_profiles">
         <div class="description">
            <div class="tool_tip tool_tip_animated tool_tip_after" style="display:none;">Something</div>
         </div>
      </div>
   </div>
</div>



$(document).ready(function(){    
    $(".chb_input_row").each(function(){
        $(this).mouseover(function(){
            $(this).find('.tool_tip_animated').fadeIn();
        });

        $(this).mouseout(function(){
            $(this).find('.tool_tip_animated').fadeOut();
        });
    });
});

So what I want is when the mouse over action is triggered by the .chb_input_row make the .tool_tip_animated to fadeIn and vice versa.

I have tried the hide() and animate() methods of jQuery but no one worked properly.

Upvotes: 0

Views: 57

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

The problem is the mouseover and mouseout events will fire when the mouse moves to child elements. The solution is to use the mouseenter and mouseleave events respectively.

You can use the hover() utility function to do this

$(document).ready(function () {
    $(".chb_input_row").hover(function () {
        $(this).find('.tool_tip_animated').fadeIn();
    }, function () {
        $(this).find('.tool_tip_animated').fadeOut();
    });
});

Upvotes: 1

antyrat
antyrat

Reputation: 27765

Try to use mouseenter instead of mouseover:

$(this).mouseenter(function(){
    $(this).find('.tool_tip_animated').fadeIn();
});

It will fire only once when mouse reach the container

Upvotes: 0

Related Questions