问题描述
我正试图通过动作停止转换(在这种情况下是悬停),但我不知道如何实现它。
这是我正在进行测试的地方:
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:
我有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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!