如何在鼠标悬停时立即停止jcarousel并继续mouseout [英] How to stop jcarousel immediately on mouseover and continue on mouseout

问题描述

我正试图通过动作停止转换（在这种情况下是悬停），但我不知道如何实现它。
这是我正在进行测试的地方：

I'm trying to stop a transition with an action(in this case on hover), but i don't know how to achieve it. This is where i'm making the test:

http://lvemil.net/gla/web/

我有3个 jcarousel的实例，我的目标是在鼠标悬停时停止（立即）移动。
问题是：当鼠标悬停在旋转木马上时，我会停止它，但当前的过渡在停止之前结束，并且感觉不是所需的，我希望在鼠标悬停时立即停止运动。

I have 3 instances of jcarousel and my goal is to stop the movement(immediately) on mouseover. The problem is: when the mouse is over the carousel, i stop it, but the current transition is ended before the stop, and the sensation is not the desired, i wish to stop the movement immediately on mouseover.

这是第一个轮播的初始化：

This is the initialization for the first carousel:

$('#jcarousel1')
.jcarousel({
    'animation': {
        'duration': 6000,    //DEFINE SPEED
        'easing':   'linear',
        'complete': function() {
        //ON ANIMATION COMPLETE ACTION GO HERE
        }
    },
    'wrap': 'circular'


}).jcarouselAutoscroll({
    interval: 1,
    target: '+=1',
    autostart: true
}).on('mouseover',function(e){
    $(this).jcarouselAutoscroll('stop');
}).on('mouseout',function(e){
    $(this).jcarouselAutoscroll('start');
});

其他两个jcarousel实例的初始化类似。

The others two instances of jcarousel are similar initialized.

更新：
我已经尝试过：

UPDATE: I already tried:

$('#jcarousel1').jcarousel('list').stop();

这会停止移动（滚动）但我无法在鼠标移出时再次开始移动在以前的相同位置。

This stops the movement (scrolling) but i'm not able to start the movement again on mouse out in the same position it was before.

更新1：
我也尝试过mouseout（并再次使用）

UPDATE 1: I also tried on mouseout (and make it work again)

$('#jcarousel1').jcarousel('destroy')
$('#jcarousel1').jcarousel( arrayWithInitOptions )

但是这会产生不良影响，因为从第一项开始从轮播开始（重新加载）开始移动，我想从鼠标悬停时的相同位置重新启动。

but this has an undesired effect because start the movement from the beginning of the carousel(a reload), from the first item, and i want to restart from the same position it was on mouseover.

推荐答案

你可以使用类似这样的东西

You may use something like this

    <script type="text/javascript" src="jquery.jcarousel.min.js"></script>
    <script type="text/javascript">
    function mycarousel_initCallback(carousel)
    {
        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };

    jQ=jQuery.noConflict();
    jQ(document).ready(function() {
        jQ('#mycarousel').jcarousel({
                    auto: 3,
                    animation: 1000,
                    scroll: 1,
                    easing: "linear",
                    wrap: 'circular',
                    initCallback: mycarousel_initCallback
        });
    });

    </script>

这篇关于如何在鼠标悬停时立即停止jcarousel并继续mouseout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！