悬停在 jQuery 循环中：下一个然后暂停答案

【问题标题】：Hover with jQuery cycle : go next then pause悬停在 jQuery 循环中：下一个然后暂停
【发布时间】：2015-06-09 10:35:23
【问题描述】：

我正在尝试制作一个循环 div。想要的最终效果是：能够点击 div1 看到 div 2。能够点击 div 2 再次看到 div 1。只用键盘也能做到这一点 ==> 这已经完成并且正在工作。

但我目标的第二部分是解决我的问题。基本上我想要这个：当我悬停 div1 时，幻灯片转到 div2。但是它必须立即停止滑动。 悬停结束后必须返回到 div 1。

这是我尝试过但不起作用的方法：

$(document).ready(function() {

    $('#s1').cycle({ 
        fx:     'slideY', 
        speed:  300, 
        next:   '#s1', 
        timeout: 0,
        after: function (curr, next) {
            $(next).find('.goto').focus();
        }
    });

    var cycleConfigured = false;

    $('#s1').hover(
        function() {
            if(cycleConfigured)
                $(this).cycle('resume');
            else
            {
                $(this).cycle({
                    fx:     'fade',
                    speed:   600,
                    timeout: 300,
                    slideResize: false,
                    pause:   0,
                    after:  function() {
                        $(this).cycle('pause');
                    }
                });
                cycleConfigured = true;
            }
        },
       function(){
            $(this).cycle('pause');
        }
    ).trigger('hover');
});

jsfiddle http://jsfiddle.net/gy8p5ewv/3/

基本上如您所见，当我将 div 悬停时，它开始滑动并且我无法停止。

总而言之，这是我无法达到的想要的效果：

在悬停容器 div 上 > 永久转到 div 2

离开悬停容器 div > 永久返回 div 1

文档：http://jquery.malsup.com/cycle/options.html

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

不要让它变得复杂，只需将 hover 回调替换为这样的触发器：

$('#s1').hover(function () {
   // Trigger a click. 
   $('#Goto2').click();
});

Working fiddle

当我们在#s1 上hover 时，我们希望 div 的行为就像#Goto2 被点击一样，并切换幻灯片。

【讨论】：