Question

setTimeout在页面上不起作用。我找不到错误。控制台不显示任何内容。

这是我的JQuery

var timer;
function sliderColorMain(){
  $('.news-main').mouseenter(function(){
     timer = setTimeout(function(){
      $(this).find('.sliding-color').slideDown(500);
    }, 200);
  }).mouseleave(function(){
      // clearTimeout(timer);
      $(this).find('.sliding-color').slideUp(250);
    });
}

Css文件：

.sliding-color{
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%; /*100%*/
    background-color: #2573CF;
    z-index: 1;
}

这是我的HTML文件

<div class="news-main">
    <div class="sliding-color"></div>
        <a href="#">
            <div class="big-image">
                <img src="img/main.jpg" alt="big main image">
           </div>
    </div>
</div>

没有setTimeout函数这个东西可以工作，但唯一的问题是，如果我将鼠标悬停在.news-main div类中，一次又一次地离开它，即使鼠标没有移动也会播放动画。所以我添加了setTimeout，但它不起作用。实际上，具有此功能的动画也不起作用

Answer 1

您正在失去对this回调中正确的setTimeout的引用。您可以通过多种方式解决此问题，但箭头功能可能是最简单的方法：

timer = setTimeout(() => {
    $(this).find('.sliding-color').slideDown(500);
}, 200);

或者，您可以使用bind：

timer = setTimeout(function () {
    $(this).find('.sliding-color').slideDown(500);
}.bind(this), 200);

或者，在之前保存jQuery表达式：

var $this = $(this);
timer = setTimeout(function () {
    $this.find('.sliding-color').slideDown(500);
}, 200);

Answer 2

停止当前动画并启动另一个也可能有效，将id设置为div .sliding-color为'sliding-color'，如

<div class="news-main">
    <div class="sliding-color" id='sliding-color'></div>
    <a href="#">
        <div class="big-image">
            <img src="img/main.jpg" alt="big main image">
        </div>
    </a>
</div>

这里是jquery代码

function sliderColorMain(){
  $slidingColor = $('#sliding-color');
  $('.news-main').mouseenter(function(){
      $slidingColor.stop(true).slideDown(500);
  }).mouseleave(function(){
      $slidingColor.stop(true).slideUp(250);
    });
}

setTimeout不起作用（JQuery）

2 个答案: