Javascript 将动画添加到此推荐滑块

我使用CSS3创建了一个滑块来显示我的推荐信。。现在我需要使用Jquery为这个滑块添加一些动画。但是我不知道如何使用Jquery和这个滑块。。什么是适合这个的插件。任何人都可以告诉我如何将动画添加到此滑块

非常感谢您的任何想法

多谢各位

下面是滑块代码的链接：jsfiddle.net/XJVYj/82

尝试使用以下代码：

---

脚本文件中有文档，您可以使用以下选项：

$.tiny.carousel = {
        options: {  
            start: 1, // where should the carousel start?
            display: 1, // how many blocks do you want to move at 1 time?
            axis: 'x', // vertical or horizontal scroller? ( x || y ).
            controls: true, // show left and right navigation buttons.
            pager: false, // is there a page number navigation present?
            interval: false, // move to another block on intervals.
            intervaltime: 3000, // interval time in milliseconds.
            rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
            animation: true, // false is instant, true is animate.
            duration: 1000, // how fast must the animation move in ms?
            callback: null // function that executes after every move.
        }
    };

其次：

动画：true，//false是即时的，true是动画

在调用元素上的滑块时，尝试将动画设置为true（您没有提供脚本代码，因此我无法为您编辑它）

---

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

我可以更改多少CSS？或者，在没有激活js的情况下，它是否仍然可以工作

您将来是否会继续使用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);
});​

希望能有帮助

---

PS：对于一个更清洁的解决方案，你必须重新考虑一下。一种方法是将所有滑块放在一个包装器中，只移动此包装器而不是移动。

这是我的带有HTML和CSS的滑块…有人能告诉我哪个jquery插件与此滑块匹配吗…？我尝试了你的代码。。。但是滑块不起作用。。这是小提琴。我不知道你做了什么。滑块设置不正确，否则会起作用。返回并重试。：）如果更改CSS，可能会影响我的布局。。我希望一次显示3个项目。。并使其从数据库中动态更改这3项…感谢您的回答。我会看看我能做些什么，当我得到一些东西时更新我的答案。。请让我知道，我们是否可以通过fadein fadeout影响自动实现这一点？Fadein和fadeout加上滑动动画或只是Fadein/out？这将更容易：）

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