JQuery fade и слайд одновременно

Я пытаюсь как сползать/исчезать div одновременно при наведении, а затем скользить/исчезать в конце зависания, используя JQuery. Слайд/затухание работает правильно, но слайд/затухание не работает. Он просто скользит без выцветания. Любые идеи?

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

Ответ 1

Ответ заключается в том, что как только оба эффекта активируются, он берет свойство inline css "display = none" от элемента. Для этих скрытых эффектов требуется, чтобы свойство display было установлено как "none". Итак, просто измените порядок методов и добавьте css-модификатор в цепочку между затуханием и слайдом.

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

Ответ 2

idk, если это помогает или нет, но вы можете пропустить слайды и fadeIn ярлыки и просто использовать анимацию:

http://jsfiddle.net/bZXjv/

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

Ответ 3

Почему бы не использовать jQuery для слайда, а CSS-переходы исчезнуть, чтобы они не мешали друг другу. Деградирует красиво!

JS:

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

CSS:

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