Question

我想在一秒钟后删除glitch课程。我试图用setTimeout来解决它，但它没有用。小班教学中没有删除课程。

$(document).ready(function (e) {
  $('.glident').hover(function() { 
    $(this).addClass('glitch') 
  }, function() { 
    $(this).removeClass('glitch') 
  })
});

这就是我试图做的事情：

$(document).ready(function () {

$('.glident').mouseover(
    function () {
        $(this).addClass('glitch')
    }
);

$('.glident').mouseout(
    setTimeout(function () {
        $(this).removeClass('glitch');
    }, 1000)
);

});

Answer 1

错误就在这里

$('.glident').mouseout(
    setTimeout(function () {

settimeout在页面加载时执行而不等待事件发生

$(document).ready(function(){
    $("button").mouseover(function(){
        setTimeout(function(){$("p").removeClass("intro");
    },1000)
     });
     $('button').mouseleave(function () {
        $("p").addClass('intro');
    });

});

.intro {
    color: red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<h1>This is a heading</h1>

<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>

<button>Remove the "intro" class from all p elements</button>

</body>
</html>

在mouseleave上没有删除该类。

与mouseleave事件不同，如果鼠标指针离开任何子元素以及所选元素，则会触发mouseout事件。 mouseleave事件仅在鼠标指针离开所选元素时触发。请参阅页面末尾的示例进行演示。

一秒后删除mouseleave上的类 - setTimeout-disaster

1 个答案: