Thomas Hutton Thomas Hutton - 7 months ago 22
HTML Question

Hide() with fadeIn()/fadeOut()

I'm trying to do a fade in and fade out jquery. However, I'm having some issues.

I hide the div when the page loads, but when I hover over it to fade it in, it fades in for a second then disappears. I then have to hover out then hover back in.

My Jquery:

$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(){
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});


My HTML:

<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button>

Answer

Just add preventDefault to stop the back and forth fade

$(document).ready(function(){
$('#hidedsl6').hide();
    $('#showdsl6').hover(function(){
        $('#hidedsl6').fadeIn();
        }, function(e){
        e.preventDefault();
        $('#hidedsl6').fadeOut();
    });
    $('#showfttn10').hover(function(){
    });
    $('#showfttn15').hover(function(){
    });
    $('#showfttn25').hover(function(){
    });
    $('#showfttn50').hover(function(){
    });
});