所以我编辑了你的小提琴,我希望这是你所期望的行为。而且它也不再像您的第一个版本那样“跳跃”。
我创建了三个新变量:
var hovered = false;
var animating = false;
var correction = null;
第一个存储元素是否悬停,第二个存储动画是否正在运行,第三个存储必须使用哪个校正(左侧或骑行侧)。
比我更新的功能来跟踪正在发生的事情:
$carouselNext.hover(function () {
if (!animating)
shunt('-=20');
hovered = true;
correction = 'next';
}, function () {
if (!animating)
shunt('+=20');
hovered = false;
correction = 'next';
});
比我更新了点击处理程序:
$carouselNext.bind('click', function(e) {
move(0);
e.preventDefault();
});
和move()
- 功能:
function move(dir, par) {
if(!animating) {
animating = true;
if(dir == 0) {
carousel.next();
} else {
carousel.prev();
}
setTimeout(function() {
shunt( ( hovered ? '+=0' : ( 'next' == correction ? '+' : '-' ) + '=20' ) );
animating = false;
}, 1700);
}
}
这是演示 - 希望你得到我更新的所有内容。
演示
jsfiddle
注意:从一开始就可以声明变量function carousel_initCallback(carousel)
- 不知何故它没有存储在小提琴中......</p>