如何为jQuery中的每个数组元素附加不同的动画效果?并用2个按钮一个接一个地向前和向后设置动画(后退和下一步）

How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

本文关键字：动画 一个 按钮 下一步 设置 2个 数组元素 jQuery 并用      更新时间：2023-09-26

更新：标题已更改！也许它的定义过去或现在都是错误的。对不起我英语不好！

我是JQuery的新手，一直从事编程、Javascript、CSS3和HTML5。如果我点击"下一个按钮"，我会尝试为我的HTML元素设置动画。它与jQuery自己的"animate"一起工作！但我现在想从我的CSS文件中为每个元素添加他自己的动画。

这是我的HTML片段：

<div id="output0" class="output0">output0</div>
<div id="output1" class="output1">output1</div>
<div id="output2" class="output2">output2</div>
<div id="output3" class="output3">output3</div>
<div id="output4" class="output4">output4</div>

这是我的CSS片段：

.output0 {
    position: absolute;
    top: 120px;
    left: 300px;
    width: 200px;
    height: 500px;
    border-top-left-radius: 10px 5px; 
    border-bottom-right-radius : 10% 5%;
    border-top-right-radius : 10px;
    background: #4d4ea3;
    text-align: center;
    text-shadow: 0 1px rgba(0, 0, 0, 0.6);
color: #FFF;
font-size: 14px;
line-height: 50px;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
}
... and so on for each Element/Class their own Animation ...

这是我的脚本片段：

var jButton = $('#Next');
$('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5').hide();
jButton.data(
    "config",
    {
        Index: 0,
        Collection: $('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5')
    });
jButton.click(
    function(objEvent){
        var jThis = $(this);
        var objConfig = jThis.data("config");
        if (objConfig.Index < objConfig.Collection.length){
            $(objConfig.Collection[objConfig.Index++]
        )
        .$('.output0').addClass(fadeInLeftBig),
        $('.output1').addClass(flipInX),
        $('.output2').addClass(fadeInRightBig),
        $('.output3').addClass(fadeInDownBig),
        $('.output4').addClass(fadeInUpBig),
        $('.output5').addClass(animate);
        //$('.output').addClass();
        //.slideDown();
        }
        objEvent.preventDefault;
        return(false);
    });
});

请帮帮伙计们！？有什么想法吗？

编辑：

对不起，我现在回答。我不得不在另一个项目中工作。现在我回来了。好的，我现在使用了相同的类和不同的ID。和我在CSS文件中使用的那些ID。但现在主要的问题是-"我现在如何在Jquery中与代码中的任何其他动画一起使用？"。我的意思是，不仅仅是>slideDown，即每个数据的fadeIn、slideIn对象/数组元素另一个，它应该是这个，：）？-我如何使用带有第二个按钮"jButton2"的数据对象来捕捉wich元素>实际动画或数据存储中的wich元素。有了这个jButton2，我想回滚动画，为此我需要知道wich元素在那里是实际的。谢谢你的帮助！

JS:

$(jButton1).data("config", {
    Index : 0,
    Collection : $('.output')
}
...
jButton1.click(function(objEvent) { 
    var jThis = $(this); 
    var objConfig = jThis.data("config"); 
    if (objConfig.Index < objConfig.Collection.length) {                                         
        $(objConfig.Collection[objConfig.Index++]).slideDown("slow"); 
    } 
}

HTML:

<div id="output0" class="output">output0</div>
<div id="output1" class="output">output1</div>
<div id="output2" class="output">output2</div>
<div id="output3" class="output">output3</div>
<div id="output4" class="output">output4</div>

值得注意的是，jQuery UI支持类切换，而单独的jQuery则不支持。

来自jQuery的animate() 文档

注意：jQuery UI项目通过允许一些非数字样式，例如要设置动画的颜色。该项目还包括通过CSS类指定动画的机制而不是单个属性。

这里有一个指向jQuery UI文档的链接：http://jqueryui.com/switchClass/

在阅读了一些书籍并进行了研究和尝试后，为我之前的问题编写了以下代码（在这里找到了原始代码，但我再也找不到链接了，对不起）。它并不完美，但我可以用一半，：D。我现在正在研究最终的解决方案。顺便说一句，我有最后三个星期的假期，所以这就是为什么花了这么长时间，：）。

不同的动画效果即将到来！

所以我们开始：

// Click Next to animate one by one
$(function() {
    var myArray = $('.output');
    var arrayIndex = 0;
    //Go Forwards
    $('#Next').click(function() {
        $(myArray[arrayIndex++]).slideDown()
        if (arrayIndex >= myArray.length)
            arrayIndex = 0;
    })

    //Go Backwards
    $('#Back').click(function() {
        $(myArray[arrayIndex--]).slideUp()
        if (arrayIndex < 0)
            arrayIndex = myArray.length - 1;
    })

});
相关文章：