Question

我正忙着在时间轴上工作，我已经在jQuery中使用基本功能了解我的jsFiddle：http://jsfiddle.net/Jason1975/6nwkd2c8/38/

问题是我无法重复悬停。我是jQuery的新手，非常感谢如何重复悬停功能。

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

Answer 1

只需要很少的小修补程序works fine。脚本改为：

$("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;
}

Answer 2

您首先设置LI的right偏移动画，然后设置left偏移的动画。最终结果是该项设置了left和right，因此无法移动。

只需来回动画一个属性/方：http://jsfiddle.net/TrueBlueAussie/6nwkd2c8/39/

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

如有疑问，请使用Chrome F12 DOM检查器查看（并更改）您的元素，这样您就可以查看正在发生的事情：）

Answer 3

我认为你想要做的就是进一步改变它，你可以通过这样的动画来做：

$("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
});

如何重复悬停功能？

3 个答案: