Geek Answers Handbook

How to keep displaying one hover at a time?

I have a small hover script and it works like this: When I find a link to a link, it disappears in the corresponding div.

Now I tried to create a second link and set it to display the second div, and I succeeded, but when I find them fast one by one, it displays BOTH faded Divs and stay in place (with 2 divs instead of 1) until it returns first div.

I want to display only one div at a time when I find, even if I quickly find between links.

Here is the code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>

<style>
#bank {display:none;}
</style>

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk">Show back and hid fancy div</a></div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

<script type="text/javascript">
//<![CDATA[

$(window).load(function(){
$('#btn').hover(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});


$('#btn-bk').hover(function(e){    
    $('#bank').fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});
/]]> 
</script>

See in action: https://jsfiddle.net/rami7250/1jLtxdr7/

+4
7

2 div

$('#btn').hover(function(e){
    $('#fancy').stop().hide();
    $('#bank').fadeIn('slow');
}); 
$('#btn-bk').hover(function(e){    
    $('#bank').stop().hide();
    $('#fancy').fadeIn('slow');    
});
#bank {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk">Show back and hid fancy div</a></div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
Hide result
+1
$('#btn').hover(function(e){    
    $('#fancy').stop(true, true).fadeOut('slow', function(){
        //--------^ Add 'stop(true, true)'
        $('#bank').fadeIn('slow');
    });
}); 
$('#btn-bk').hover(function(e){    
    $('#bank').stop(true, true).fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});

stop(true, true), , .

+2

, :

var flag;
$('#btn').hover(function(e){
if (flag)return;
flag = true;
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
        flag = false;
    });
});


$('#btn-bk').hover(function(e){  
if (flag)return;
flag = true;
    $('#bank').fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
         flag = false;
    });
});

fiddle

0

, , , . , stop() .

$('#btn').hover(function(e){    
    $('#fancy').stop().fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});


$('#btn-bk').hover(function(e){    
    $('#bank').stop().fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});

: https://jsfiddle.net/1jLtxdr7/2/

0
<html>
<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>

<style>
#bank {display:none;}
</style>
</head>

<body>
<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<BR>
<BR>
<div><a href="#" id="btn-bk">Show back and hid fancy div</a></div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

<script type="text/javascript">


$(window).load(function(){
$('#btn').hover(function(e){    
    $('#fancy').fadeOut(40, function(){
        $('#bank').fadeIn('slow');
    });
});


$('#btn-bk').hover(function(e){    
    $('#bank').fadeOut(40, function(){
        $('#fancy').fadeIn('slow');
    });
});
});
</script>
<body>
</html>

. fadeIn

0

:

$('.toggle_text').hover(function(e){ 
    var text = $(this).attr("data-info");
    var text_to_show = $("#"+text).html();    
    
    $('#show_div').fadeOut('slow', function(){
      $('#show_div').html(text_to_show).fadeIn('slow');
    });
});
#bank {display:none;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><a href="#" id="btn" class="toggle_text" data-info="show_fancy">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk" class="toggle_text" data-info="show_bank">Show back and hid fancy div</a></div><br>
<div id="show_bank" class="hide">Bank Div</div>
<div id="show_fancy" class="hide">Fancy Div</div>
<div id="show_div"></div>
Hide result

, .

0

$('#btn').hover(
    function(e){    
        $('#bank').show();
  },
  function(e){
    $('#fancy, #bank').hide();
  }
);


$('#btn-bk').hover(
    function(e){    
        $('#fancy').show();
  },
  function(e){
    $('#fancy, #bank').hide()
  }
);
0

More articles:


All Articles