CODEWITHSUNDEEP
jquery
Awea
Awea

Reputation: 3173

Jquery mouseover mouseleave

HTML

<div id="div-1">I'm div-1</div>
<div id="div-2">I'm div-2</div>

JS

$("#div-1").bind('mouseover',function(event){
  $('#div-2').stop(true,true).fadeIn(100);
});
$('#div-2').bind('mouseleave', function(e) {
  $(this).stop(true,true).fadeOut(100);
});

My question is : How can I fadeOut the #div-2 If I mouseleave in the #div-1 ? I'm currently using jquery 1.2.6 and I can't change the version.

EDIT

jsfiddle example

Upvotes: 2

Views: 16667

Answers (3)

gion_13
gion_13

Reputation: 41533

SOLUTION 1 :

You could wrap your elements and add event handlers on that wrapper.
This way you avoid the different elements mousein/mouseout event handlers conflict:

HTML : 

<div id="wrapper">
    <div id="div-1">I'm div-1</div>
    <div id="div-2">I'm div-2</div>
</div>

JS :

$('#wrapper').hover(
    function(){$('#div-2').stop().fadeIn(100);},
    function(){$('#div-2').stop().fadeOut(100);}
);

Here's a live demo :

http://jsfiddle.net/gion_13/JUFDA/2/

SOLUTION 2 :

If you have multiple elements on which you want to bind the same event-handlers, you could try something like listening to the event on the whole document and matching the event's target with your selected elements. If the event is targeted on your elements do something (fadeIn), else do something else (fadeOut) : 

var el = $("#div-1,#div-2").get();
$(document).bind('mouseover', function(event) {
    var f = el.indexOf(event.target) === -1
        ? 'fadeOut'
        : 'fadeIn';
    $('#div-2').stop(true, true)[f](100);
});

Here's a live demo :

http://jsfiddle.net/gion_13/JUFDA/1/

I know this is not the optimal solution, but it might come in handy if you want to extend your functionality over other dom elements as well.

SOLUTION 3 :

You could delay the execution of your mouseleave event handler on the first div, this way allowing the event handlers to execute in a different order :
from :

  1. $('#div-1').mouseleave()
  2. $('#div-2').mouseover()
    to :
  3. $('#div-2').mouseover()
  4. $('#div-1').mouseleave()
    In this way you avoid the event-handlers conflict and, because the animation duration is very little (0.1 seconds), the delay on the first div's mouseleave event handler execution is not noticeable : 

$("#div-1")
    .bind('mouseover',function(event){
        $('#div-2').stop(true,true).fadeIn(100);
    })
    .bind('mouseleave',function(){
        setTimeout(function(){
            if(!$('#div-2').data('over_second'))
                 $('#div-2').stop(true,true).fadeOut(50);
        },50);
    });
$('#div-2')
    .bind('mouseover',function(event){
        $(this)
            .stop(true,true)
            .fadeIn(100)
            .data('over_second',true);
    })
    .bind('mouseleave', function(e) {
        $(this)
            .stop(true,true)
            .fadeOut(100)
            .removeData('over_second');
    });
Here's a live demo :

http://jsfiddle.net/gion_13/JUFDA/3/

Upvotes: 8

Senica Gonzalez
Senica Gonzalez

Reputation: 8182

$("#div-1").bind('mouseover',function(event){
  $('#div-2').stop(true,true).fadeIn(100);
}).bind('mouseleave', function(event){
  $('#div-2').stop(true,true).fadeOut(100);
});
$('#div-2').bind('mouseleave', function(e) {
  $(this).stop(true,true).fadeOut(100);
});

Upvotes: 0

John x
John x

Reputation: 4031

$("#div-1").bind('mouseover',function(event){
  $(this).stop(true,true).fadeIn(100);
  $('#div-2').fadeOut(100);
});
$('#div-1').bind('mouseleave', function(e) {
  $(this).fadeOut(100);
  $('#div-2').fadeIn(100);
});

Upvotes: 0

Related Questions