Question

我正在尝试创建一个循环div。想要的最终效果是：能够单击div1以查看div 2.能够单击div 2再次查看div 1。只能用键盘==＆gt;才能做到这一点。这已经完成并且有效。

但我的目标的第二部分是解决我的问题。基本上我想要这个：当我悬停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上的

＆gt;永久地去div 2

离开悬停容器div＆gt;永久地回到div 1

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

Answer 1

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

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

Working fiddle

当我们hover #s1时，我们希望div的行为就像点击了#Goto2一样，然后切换幻灯片。

使用jQuery循环悬停：下一步然后暂停

1 个答案: