jquery - 在 jquery roundrr 插件中暂停动画 onhover

Question

我正在使用这个插件，我已经设置了动画autoplay : true。但我想停止动画mouseover并mouseout在roundrr_container div. 我试图编辑代码，但无法完成。你能帮我解决这个问题吗？

Answer 1

addyosmani 有两个活动。

onImageFocus: 

在“pick”模式下，当图像出现在pick下时执行的函数

onImageBlur:

在“pick”模式下，当图像不在pick下时执行的函数

和

hide()//Hide items
show()//show items in roundr

您可以做的是onImageFocus使用hide()事件停止动画并onImageBlur使用show()恢复动画效果。

所以使用类似这样的东西

$(document).ready(function() { 
    $('#roundrr_container').hover(function() {    
       $(this).roundrrwheel(  
    {  
        autoplay: false  
    });
}, function() {
    $(this).roundrrwheel(  
    {  
        autoplay: true 
    });
});
});

Answer 2

最后解决的问题

<script type="text/javascript">
$(document).ready(function() {                                     $('.my_class').mouseover(function(event)                                                            {                                                                   ap=1;                                                               });                            $('.my_class').mouseout(function(event)                                                              {                                                                   ap=0;                                                                   });
});
</script>`

然后它检查了 jquery.roundrr.js 页面

在函数声明之前在页面顶部首先声明变量 ap 然后将函数 switchitems 循环中的代码更改为

function switchItems($m, remove, add, posOffset, direction){if(ap==0){
    if(remove==add) add = remove - 1; 
    var $remove = $($m.raditems()[remove]); 
    var toAddto = $m.raditems()[add]; 
    if(remove>add) $remove.insertBefore(toAddto);
    else $remove.insertAfter(toAddto);
    animateWheel($m,posOffset, direction); }};`

Answer 3

我没有用过这个，但试试类似的东西：

$(document).ready(function() { 
    $('img').hover(function() {    
        $("#roundrr_container").roundrrwheel(  
        {  
            autoplay: false  
        });
    }, function() {
        $("#roundrr_container").roundrrwheel(  
        {  
            autoplay: true 
        });
    });
});