Question

好的，所以我试图暂停页面上的所有幻灯片动画。目前我有三排盒子都使用相同的滑块脚本，共享相同的类名。我想要做的是暂停其中一个动画，当其中一个动画被鼠标悬停时。

我正在使用来自http://responsive-slides.viljamis.com/的自适应幻灯片脚本这就是我标记HTML的方法（请忽略$ smarty语法）：

<section class="greenBox">
<ul class="rslides slider1">
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/hamilton.jpg" data-hover="  {$smarty.const.SITEURL}/images/vane/celebs/hamiltonQ.jpg" alt="Lewis Hamilton"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/downey.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/downeyQ.jpg" alt="Robert Downey JR"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/mayer.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/mayerQ.png" alt="John Mayer"></li>
</ul>
</section>

这是jQuery：

$(function () {
  $(".slider1").responsiveSlides({
    maxwidth: 800,
    speed: 800,
  });
});

当然我可以添加暂停：true;对此进行统治，然而所有这一切都暂停了图像被碾过而其他人继续改变当然。我要做的是保持这些图像的顺序，所以我需要在鼠标悬停时暂停所有3个图像！

我尝试过使用这样的停止规则：

$(".slider1").mouseover(function(){
 $("this").stop();
});

但这没有做任何事情。我确定这很简单，但我的jQuery只是初学者级别，任何帮助??

我正在处理的网站的网址是http://vane.vanillasoftware.co.uk

Answer 1

更改

$(".slider1").mouseover(function(){
 $("this").stop();
});

有关

$(".slider1").mouseover(function(){
 $(".slider1").children().stop();
});

Here它正在发挥作用。

警告：

Stop是jQuery动画的方法，不是gallery插件提供的方法。这可能会产生不良后果。

Answer 2

以下是我在github上从开发人员那里得到的回复 https://github.com/viljamis/ResponsiveSlides.js/issues/95

在鼠标悬停时暂停所有动画？

2 个答案: