Jquery 如何重复悬停功能？

我正忙着制定时间线，我已经在jQuery中实现了基本功能请参见我的JSFIDLE：

问题是我不能重复悬停。我对jQuery非常陌生，如果能给我一些关于如何重复悬停功能的指导，我将不胜感激

$(document).ready(function(){
    $("a#next").hover(function(){
        $("li").animate({ "right" : "300px" }, "slow");
    });
    $("a#prev").hover(function(){
        $("li").animate({ "left" : "0" }, "slow");
    });   
});

---

首先设置LIs的

右侧

偏移的动画，然后设置

左侧

偏移的动画。最终结果是项目同时设置了

左

和

右

，因此无法移动

只需来回设置一个属性/边的动画：

---

如果有疑问，请使用Chrome F12 DOM inspector查看（并更改）您的元素，这样您就可以看到发生了什么：）

我想您要做的是进一步移动它，您可以通过aimate这样做：

$("a#next").hover(function () {
    $("li").animate({
        "left": "+=300px" //+= is the key
    }, "slow");
});

[编辑]摆弄小提琴告诉我实际答案是左/右的混合，因为如果你将左=0，右将被忽略

$(document).ready(function(){
    $("a#next").hover(function(){
        $("li").animate({ "right" : "+=300px" }, "slow");
    },function(){}); //empty function to prevent jQuery to use the first on leave too
    $("a#prev").hover(function(){
        $("li").animate({ "right" : "0" }, "slow");
    },function(){});  //empty function to prevent jQuery to use the first on leave too
});

由于几乎没有小的修正，它的性能得到了提高。脚本更改为：

$("a#next").mouseenter(function () {
    $("#new").animate({
        "left": "+=200px"
    }, 200);
});
$("a#prev").mouseenter(function () {
    $("#new").animate({
        "left": "-=200px"
    }, 200);
});

和小型CSS修复程序：

#container {
    position: relative;
}
#new {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
#next, #prev {
    top: 0;
}

---

重复悬停是什么意思？你能更清楚地描述一下你的预期行为吗？你所说的“重复悬停功能”是什么意思？悬停是发生在您的操作上的事件。当前，如果我在下一个箭头上悬停一次，并且在两个箭头都被触发后又在右箭头上悬停一次，我将无法再次悬停，并且我需要能够重复悬停。第一次触发两次的代码出现在

'onmouseinter'

，第二次触发的代码出现在

'onMouseOut'

显然，当没有定义第二个函数时，jQuery使用hover函数作为leave

#container {
    position: relative;
}
#new {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
#next, #prev {
    top: 0;
}