Question

这是我的代码：

$(function() {
$("#page-flip").mouseover(function() { 

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
});
});

它运行良好，但鼠标悬停有点烦躁。我希望它能够坚持更长时间，并且在第一次触发时不会退缩。例如，如果用户正在快速移动他/她的鼠标，则应该完全释放或者根本不释放，而不是半步。有任何想法吗？

我认为超时是要走的路，但我已经尝试了这个，现在这些课程都不会切换。

function myMouseOver() 
{

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");

}

$("#page-flip").mouseover(function() { 
          var t = setTimeout("myMouseOver()",1500);
});

Answer 1

延迟javascript执行，你可以使用 setTimeout 或 setInterval

试试这个：

function myMouseOver()
{
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
}


$("#page-flip").mouseover(function() { 
  var t = setTimeout("myMouseOver()",1500);
});

我为你做了一个jsFiddle，告诉我这是不是你的想法： http://jsfiddle.net/alexpeta/fWakf/5/

Answer 2

您是否尝试过使用mouseenter事件代替mouseover事件？它被设计为仅在光标进入元素区域时触发，而不是在您mouseover子元素然后mouseout该子元素时触发：

$(function() {

    $("#page-flip").mouseenter(function() { 

        $(".box").toggleClass("box-change");
        $(".films").toggleClass("films-change");
        $(".synopsis").toggleClass("synopsis-change");
    });
});

Answer 3

在js.fiddle上试试这段代码。此函数将模拟具有一致行为的鼠标悬停。

$(function() {
$("#page-flip").mouseenter(function() { 

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
})
$("#page-flip").mouseleave(function() { 

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
})
});

Answer 4

您正在寻找hoverIntent plugin，它可以为您取消鼠标悬停事件。

$(selector).hoverIntent(hoverCallback, leaveCallback);

如何更长时间制作鼠标悬停棒？

4 个答案: