0

更新：标题变了！也许它的定义是错误的或仍然是错误的。对不起，我的英语不好！

我是 JQuery 的新手，并且总是在编程、Javascript、CSS3 和 HTML5 方面。如果我单击“下一步按钮”，我正在尝试为我的 HTML 元素设置动画。它适用于 jQuery 自己的“动画”！但我现在想从我的 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”的数据对象来捕捉那个元素是>实际动画或数据存储。有了这个jButton2，我想回滚动画，>为此我需要知道那里的实际元素。感谢您的帮助！

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>
4

2 回答 2

0

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

来自 jQuery 的文档animate()

注意：jQuery UI 项目扩展了 .animate() 方法，允许对一些非数字样式（例如颜色）进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

这是 jQuery UI 文档的链接：http: //jqueryui.com/switchClass/

于 2013-08-28T11:11:33.413 回答
0

在阅读了一些书籍并研究和尝试之后，为我之前的问题工作了以下代码（原始代码在这里找到但我无法再次找到链接，抱歉）。它并不完美，但我可以使用它一半，:D。关于我现在正在工作的最终解决方案。顺便说一句，我有最后 3 周的假期，所以这就是为什么花了这么长时间，:)。

不同的动画效果即将推出！

所以我们开始：

// 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;

    })



});
于 2013-10-01T14:02:17.747 回答