Question

这是我尝试申请工作的代码。当光标触摸div或悬停鼠标时，如何淡出停止？

我试图在这里找到解决问题的方法，但还没有实现。

＆＃13;

$("#prettyslides > div:gt(0)").hide();
setInterval(function() {
  $('#prettyslides > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#prettyslides');
}, 3000);

＆＃13;

Answer 1

您可以在悬停时清除/设置间隔..

$("#prettyslides > div:gt(0)").hide();

// Set setInterval() to a variable
var interval = setInterval(function() {
  $('#prettyslides > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#prettyslides');
}, 3000);

// Clear on mouse over
$('#prettyslides').on('mouseenter', function() {
     clearInterval(interval);
})

// Set on mouse out
$('#prettyslides').on('mouseleave', function() {
     interval;
})

..或者，您可以在悬停时添加一个类，以防止动画链被触发：

$("#prettyslides > div:gt(0)").hide();
setInterval(function() {
  $('#prettyslides:not(hovered) > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#prettyslides');
}, 3000);

$('#prettyslides').on('mouseenter', function() {
     $(this).addClass('hovered');
})

$('#prettyslides').on('mouseleave', function() {
    $(this).removeClass('hovered');
})

如何停止淡入鼠标悬停，Javascript代码？

1 个答案: