javascript - 向此推荐 slider 添加动画

Question

我已经使用 CSS3 创建了一个 slider 来显示我的推荐。现在我需要使用 Jquery 向这个 slider 添加一些动画。但我不知道如何将 Jquery 与此 slider 一起使用.. 以及适合此的插件是什么。所以任何人都可以告诉我如何向这个 slider 添加动画？

非常感谢任何想法。

谢谢。

这里是 slider 代码的链接:jsfiddle.net/XJVYj/82

Answer 1

我认为很难找到与您的代码完全匹配的插件。但我可以为你编写 jQuery 代码。但是我会有两个问题。

1. 我可以更改多少 CSS？或者它是否也应该在没有激活 js 的情况下工作？
2. 您将来会保留 3 个元素吗？或者您想动态更改幻灯片的数量？

//编辑

好的，现在可以了。我知道它不是很优雅，但我不想更改太多您的代码。所以我只需要编辑你的两个 css 选择器(我把旧的注释掉了)。您还想注意到，使用此解决方案，您的旧方法在禁用 javascript 时仍然有效。jQuery 代码如下...

$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});

$("input#first").click(function(){
    $("div.one").animate({left:0},600);
    $("div.two").animate({left:300},600);
    $("div.three").animate({left:600},600);
});

$("input#second").click(function(){
    $("div.one").animate({left:-300},600);
    $("div.two").animate({left:0},600);
    $("div.three").animate({left:300},600);
});

$("input#third").click(function(){
    $("div.one").animate({left:-600},600);
    $("div.two").animate({left:-300},600);
    $("div.three").animate({left:0},600);
});​

jsfiddle.net/mYhEV/2/

希望对您有所帮助。

PS:要获得更简洁的解决方案，您需要重新考虑一下。一种方法是将所有 slider 放在一个包装器中，然后只移动这个包装器而不是移动。