Question

我想在mouseover上添加一个自定义类。因此，当鼠标悬停在.leftbar上时，会添加一个类并且应该弹出它（我为他设置了css）。如何为弹出窗口添加slow或时间延迟？

<script>
$(document).ready(function(){
$( ".leftbar" ).mouseenter(function() {
$( "body" ).addClass( "myclass" );
});
});

$(document).ready(function(){
$( ".leftbar" ).mouseleave(function() {
$( "body" ).removeClass( "myclass1" );
});
});
</script>

我试过这个 - $( "body" ).addClass( "myclass" , '300');没有运气

谢谢！

Answer 1

您可以使用setTimeout

$(document).ready(function(){
    $( ".leftbar" ).mouseenter(function() {
        window.setTimeout(function(){
            $( "body" ).addClass( "myclass" );
        }, 300);
    });
}):

请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

Answer 2

使用setTimeout，确保在光标离开时将其清除。

轻微错误，但myclass != myclass1。

$(document).ready(function(){
    var barTimeout = 0;
    $( ".leftbar" ).on({
        mouseenter: function(){
            barTimeout = setTimeout(function(){
                $( "body" ).addClass( "myclass" );
            }, 300);
        },
        mouseleave: function(){
            if( typeof barTimeout !== 'undefined' ) clearTimeout( barTimeout );
            $( "body" ).removeClass( "myclass" );
        }
    });
});

JSFiddle

Answer 3

您可以查看jQuery UI方法addClass，它允许您将一些动画参数传入其中。在此处查看示例和文档http://api.jqueryui.com/addClass/

供您使用，它应该像添加到addClass()

的延迟一样简单

添加对jQuery库的引用，然后将代码更改为;

$("body").addClass("myclass", 300);

Answer 4

你可以这样做：

$(document).ready(function () {
    $(".leftbar").hover( function () {
        $(this).delay(300).queue(function(next){
            $(this).addClass("myclass");
            next();
        });
    }, function(){
        $(this).delay(300).queue(function(next){
            $(this).removeClass("myclass");
            next();   
        });
    });
});

请在此处查看：JSFiddle

如何添加时间延迟

4 个答案: