jQuery наведите курсор на изображение / div, скользящий вниз, переходы примера окна входа

Question

jQuery наведите курсор на изображение / div, скользящий вниз, переходы примера окна входа

0

Как я могу изменить эффект перехода hover js на другой переход (fadein, fadeout, простые переходы) и т.д.?!

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

Benejj 20 март 2014, в 21:47

Источник

2

Вы пытались просто заменить slideDown на fadeIn т. Д.
adeneo 20 март 2014, в 20:35
0

Тай, а как ты можешь добавить пользовательскую задержку? Например 1500 вместо медленного возможно или 100-200 вместо быстрого
Benejj 20 март 2014, в 20:40

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Вы пытались просто заменить slideDown на fadeIn т. Д.
Тай, а как ты можешь добавить пользовательскую задержку? Например 1500 вместо медленного возможно или 100-200 вместо быстрого

ntgCleaner · Answer 1 · 2014-03-20T19-12-00.000Z

Просто замените свои .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));
    }
});

andrew · Answer 2 · 2014-03-20T18-51-00.000Z

Просто используйте другую анимацию jQuery, например .fadeOut()

 $('#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').fadeOut('slow')
            }, 300)
        );
    }
});

http://jsfiddle.net/H8TaV/

yW0K5o · Answer 3 · 2014-03-20T18-16-00.000Z

https://api.jquery.com/animate/

$('#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" ).animate({
                                        opacity: 0.15,
                                        left: "+=50",
                                        height: "toggle"
                                      }, 5000, function() {
                                        // Animation complete.
                                          $('#login-box').slideUp('slow')
                                      });

            }, 300)
        );
    }
});