如何一起使用fadein（）和slideDown（）？

Question

如何一起使用fadein（）和slideDown（）？

............................................... .................................................. .................................................. ..................

$('#login-trigger, #login-box').on({
    mouseenter: function(e) {
        if (e.target.id == 'login-trigger') $('#login-box').fadeIn('slow');
        if (e.target.id == 'login-trigger') $('#login-box').slideDown('slow');  
        clearTimeout( $('#login-box').data('timer') );
    },
    mouseleave: function() {
        $('#login-box').data('timer', 
            setTimeout(function() {
                $('#login-box').fadeOut('slow')
                $('#login-box').slideUp('slow')
            }, 300)
        );
    }
});

Answer 1

$(your selector).animate({ height: 0, opacity: 0 }, 'slow');

Answer 2

您可以使用切换高度和不透明度，因为 mouseleave 适用于 mouseenter

$("#login-box").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

另外我建议你添加e.preventDefault（）;在mouseenter，mouseleave函数执行之后。

$('#login-trigger, #login-box').on({
    mouseenter: function(e) {
        if (e.target.id == 'login-trigger') $("#login-box").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
        clearTimeout( $('#login-box').data('timer') );
        e.preventDefault();
    },
    mouseleave: function(e) {
        $('#login-box').data('timer', 
        setTimeout(function() {
            $("#login-box").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
        }, 300)
        );
        e.preventDefault();
    }
});