Javascript 如何添加时间延迟

我想在mouseover上添加一个自定义类。因此，当鼠标悬停在

.leftbar

上时，会添加一个类并弹出它（我为他的设置了css）。如何为弹出窗口添加

slow

或延时

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

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

$（文档）.ready（函数（）{
$（“.leftbar”）.mouseenter（函数（）{
$（“正文”）.addClass（“myclass”）；
});
});
$（文档）.ready（函数（）{
$（“.leftbar”）.mouseleave（函数（）{
$（“正文”）.removeClass（“myclass1”）；
});
});

我试过这个-

$（“body”）.addClass（“myclass”，“300”）没有运气

谢谢大家!
 您可以使用setTimeout

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

请参见使用
设置超时
，确保在光标离开时将其清除

小错误，但
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" );
        }
    });
});

您可以查看jQuery UI方法
addClass
，该方法允许您将一些动画参数传入其中。在这里查看示例和文档

对于您的使用，它应该非常简单，只需将延迟添加到
addClass（）

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

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

您可以这样做：

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

请在此处查看：
查看队列是您的朋友：您是否将引用添加到jQueryUI？是的，请查看pastebin代码-。我尝试了一种放松效果。在您的示例中，您在进入和离开时都有
removeClass
？非常感谢！这很有效。我没有给这个代码添加缓和效果-。你能帮忙吗？你能帮我增加一个舒缓效果吗？这就是我试过的-。