jquery fade et slide simultanés

Question

J'essaie de faire glisser et de faire disparaître une division simultanément lors d'un survol, puis de la faire glisser et de la faire disparaître à la fin du survol, en utilisant JQuery. Le glissement/décollement fonctionne correctement, mais pas le glissement/décollement à l'entrée. Il se contente de glisser sans fondu. Avez-vous une idée ?

#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 });
});

Answer 1

Je ne sais pas si cela peut vous aider, mais vous pouvez ignorer les raccourcis slideUp et fadeIn et utiliser simplement animate :

http://jsfiddle.net/bZXjv/

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

Answer 2

La réponse est qu'une fois que l'un ou l'autre des effets est activé, la propriété css en ligne "display=none" de l'élément est supprimée. Ces effets de masquage nécessitent que la propriété display soit définie sur "none". Il suffit donc de réorganiser l'ordre des méthodes et d'ajouter un modificateur css dans la chaîne entre fade et 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);
});

Answer 3

Pourquoi ne pas utiliser jQuery pour le glissement, et les transitions CSS pour le fondu, afin qu'ils n'interfèrent pas entre eux. Les dégradations sont belles !

JS :

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

CSS :

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

Answer 4

Le slide de jQuery s'embrouille avec l'opacité au démarrage, et le fadeIn s'embrouille avec le basculement de la hauteur.

La meilleure chose que vous puissiez faire est d'écrire votre propre animation, quelque chose dans la lignée de :

    var slideDuration = 1000;

    var slideInAnimation = {        
        opacity: 1,    
        height: 'toggle'
    }

    var slideOutAnimation = {       
        opacity: 0,    
        height: 'toggle'
    }

    $('#anotherDiv').hover(function() {
        $('#myDiv').css("opacity", "0").animate(slideInAnimation, slideDuration);
    }, function() {
        $('#myDiv').animate(slideOutAnimation, slideDuration);
    });