I am trying to stop the transition with an action (in this case, hover), but I don't know how to achieve it. This is where I am doing the test:
http://lvemil.net/gla/web/
I have 3 instances jcarousel, and my goal is to stop the movement (right away) on hover. The problem is this: when the mouse is above the carousel, I stop it, but the current transition ends before it stops, and the sensation is not desirable, I want to immediately stop the movement when the mouse is over.
This is the initialization for the first carousel:
$('#jcarousel1')
.jcarousel({
'animation': {
'duration': 6000,
'easing': 'linear',
'complete': function() {
}
},
'wrap': 'circular'
}).jcarouselAutoscroll({
interval: 1,
target: '+=1',
autostart: true
}).on('mouseover',function(e){
$(this).jcarouselAutoscroll('stop');
}).on('mouseout',function(e){
$(this).jcarouselAutoscroll('start');
});
The other two instances of jcarousel are similar to the initialized ones.
UPDATE: I already tried:
$('#jcarousel1').jcarousel('list').stop();
(), , .
1:
mouseout ( )
$('#jcarousel1').jcarousel('destroy')
$('#jcarousel1').jcarousel( arrayWithInitOptions )
, (), , , .