javascript - jQuery 悬停在图像/div 上滑动登录框示例转换

Question

如何将悬停 js 过渡效果更改为另一个过渡效果(淡入、淡出、简单过渡)等？!

http://jsfiddle.net/xjLVE/

HTML

<img id="login-trigger" src="http://www.jointcommission.org/assets/1/6/button-login.jpg" />
<div id="login-box">
    <p>Login now:</p>
    Username : <input />
    <br />
    Password : <input />
</div>

JavaScript

$('#login-trigger, #login-box').on({
    mouseenter: function(e) {
        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').slideUp('slow')
            }, 300)
        );
    }
});

你有想法吗？任何解决方案？ TY

Answer 1

只需将您的 .slideDown 和 .slideUp 替换为相同(和相反)的响应:

http://jsfiddle.net/xjLVE/18/

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