CODEWITHSUNDEEP
jquery
dchang
dchang

Reputation: 2460

jquery fade and slide simultaneously

I'm trying to both slide/fade a div simultaneously on a hover, then slide/fade it out at the end of the hover, using JQuery. The slide/fade out work properly, but the slide/fade in doesn't. It just slides in without the fade. Any ideas?

#myDiv {
    display: none;
    height: 110px;
    position: absolute;
    bottom: 0px; left: 0px;
}

$('#anotherDiv').hover(function() {
    $('#myDiv').stop(true, true).slideDown(slideDuration).fadeIn({ duration: slideDuration, queue: false });
}, function() {
    $('#myDiv').stop(true, true).slideUp(slideDuration).fadeOut({ duration: slideDuration, queue: false });
});

Upvotes: 39

Views: 63149

Answers (3)

shalamos
shalamos

Reputation: 231

Why not use jQuery to slide, and CSS transitions to fade, so they do not interfere with each other. Degrades nicely!

JS: 

$('#myDiv').addClass("fadingOut");
$('#myDiv').slideUp(600,function(){
    $('#myDiv').removeClass("fadingOut");
});

CSS: 

.fadingOut {
    transition:opacity 0.6s linear;
    opacity:0;
}

Upvotes: 8

Matt S
Matt S

Reputation: 1882

The answer is that once either effects activate, it takes the inline css property "display=none" off of the element. These hide effects require the display property to be set to "none". So, just rearrange the order of methods and add a css-modifier in the chain between fade and slide.

$('#anotherDiv').hover(function() {
    $('#myDiv').stop(true, true).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);    
}, function() {
    $('#myDiv').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration);
});

Upvotes: 44

Joseph Marikle
Joseph Marikle

Reputation: 78580

idk if this helps or not, but you can skip the slideUp and fadeIn shortcuts and just use animate:

http://jsfiddle.net/bZXjv/

$('#anotherDiv').hover(function() {
    $('#myDiv')
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },slideDuration);
});

Upvotes: 54

Related Questions