如何为每一个阵列的元素附加jQuery的不同Animationeffects？和动画逐个向前和向后带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)?
问题描述
更新：标题改了！也许是或还是老样子错误定义。对不起，我的英语不好！
我是新的jQuery和总是编程，使用Javascript，CSS3和HTML5。我试图动画我的HTML元素，如果我下一步键式点击。它的工作原理与jQuery自己的动画！但我想，现在从我的CSS-文件添加到每个元素自己的动画。
下面是我的HTML片段：
＆LT; DIV ID =output0级=output0＆GT; output0＆LT; / DIV＆GT;
＆LT; DIV ID =输出1级=输出1＆GT;输出1＆LT; / DIV＆GT;
＆LT; DIV ID =输出2级=输出2＆GT;输出2＆LT; / DIV＆GT;
＆LT; DIV ID =OUTPUT3级=OUTPUT3＆GT;＆OUTPUT3 LT; / DIV＆GT;
＆LT; DIV ID =输出4级=输出4＆GT;输出4＆LT; / DIV＆GT;
下面是我的CSS代码片段：
.output0 {
位置：绝对的;
顶：120像素;
左：300像素;
宽度：200像素;
高度：500像素;
边框左上角的半径：10px的为5px;
边框右下角半径：10％5％;
边框右上角半径：10px的;
背景：＃4d4ea3;
文本对齐：中心;
文字阴影：0 1px的RGBA（0，0，0，0.6）;
颜色：#FFF;
字体大小：14px的;
行高：50像素;
-webkit-动画持续时间：3秒;
-webkit-动画延迟：2秒;
-webkit-动画迭代计数：1;
边框右下角半径：10％5％;
边框右上角半径：10px的;
}...等等每一个元素/类自己的动画...
下面是我的脚本片段：
JButton的VAR = $（'＃下一步）;
$（'。输出'，'output0。'，'.output1'，'.output2'，'输出3'，'.output4'，'.output5'）隐藏（）;
jButton.data（
配置，
{
指数：0，
集合：$（'输出'，'output0。'，'.output1'，'.output2'，'输出3'，'.output4'，'.output5'）
}）;
jButton.click（
功能（objEvent）{
VAR jThis = $（本）;
VAR objConfig = jThis.data（配置）;
如果（objConfig.Index＆LT; objConfig.Collection.length）{
$（objConfig.Collection [objConfig.Index ++]
）
$（'。output0'）。addClass（fadeInLeftBig）
$（'输出1'）。addClass（flipInX）
$（'输出2'）。addClass（fadeInRightBig）
$（'。OUTPUT3'）。addClass（fadeInDownBig）
$（'。输出4）。addClass（fadeInUpBig）
$（'。output5'）addClass（动画）。
// $（'输出'）addClass（）。
//。滑下（）;
}
objEvent preventDefault。
返回（假）;
}）;
}）;
请帮家伙！？任何想法？
编辑：
抱歉，我现在正在回答。我在另一个项目工作。现在
我回来了。好吧，我现在用相同的类和不同的ID。和
这些ID的我在CSS的文件中使用。但现在的主要问题是
- 我怎样才能jQuery的在我的code现在使用的任何其他动画？。我的意思是不但>了slideDown，即淡入，为的slideIn每个数据
对象/数组元素一个又一个，它应该是准确的这一块，:)？
- 如何我可以使用数据对象与第二个按钮将jButton2赶上那至极元素>实际动画或数据存储。有了这个我将jButton2回滚希望这个动画和>我需要知道至极元素是实际存在。
感谢您的帮助！JS：
$（的jButton1）。数据（配置，{
指数：0，
专辑：$（'输出'）
}
...
jButton1.click（功能（objEvent）{
VAR jThis = $（本）;
VAR objConfig = jThis.data（配置）;
如果（objConfig.Index＆LT; objConfig.Collection.length）{
$（objConfig.Collection [objConfig.Index ++]）了slideDown（慢）。
}
}HTML
＆LT; DIV ID =output0级=输出＆GT; output0＆LT; / DIV＆GT;
＆LT; DIV ID =输出1级=输出＆GT;输出1＆LT; / DIV＆GT;
＆LT; DIV ID =输出2级=输出＆GT;输出2＆LT; / DIV＆GT;
＆LT; DIV ID =OUTPUT3级=输出＆GT;＆OUTPUT3 LT; / DIV＆GT;
＆LT; DIV ID =输出4级=输出＆GT;输出4＆LT; / DIV＆GT;
解决方案阅读一些书籍和研究，并尝试出局后，工作以下code为我的preceding问题（原来的code在这里被发现但我找不到链接再次，抱歉）。它并不完美，但我可以用它来做半途而废，：D。在最终解决我现在正在工作。顺便说一句，我有过去的3周假期，所以这就是为什么花了这么长时间，。）
不同Animationeffects即将推出！
所以在这里，我们去：
//点击下一步一个动画1
$（函数（）{
VAR myArray的= $（'输出'）;
变种arrayIndex = 0; //转到前锋
$（'＃下一步'）。点击（函数（）{ $（myarray的[arrayIndex ++]）了slideDown（） 如果（arrayIndex＆GT; = myArray.length）
arrayIndex = 0;
}）
//倒退
$（'＃返回'）。点击（函数（）{
$（myarray的[arrayIndex - ]）。效果基本show（）
如果（arrayIndex℃，）
arrayIndex = myArray.length - 1; }）}）;Update: Title changed! Maybe it was or stil wrong defined. sorry for my bad english!
i'm new in JQuery and always in programming, Javascript, CSS3 and HTML5. And i'm trying to animate my HTML Elements if i click on the "Next-Button". It works with jQuery own "animate"! But i want now add to each Element his own Animation from my CSS-File.
Here is my HTML snippet:
<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>Here is my CSS snippet:
.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 ...Here is my Script snippet:
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); }); });Please help guys!? Any Idea?
Edit:
sorry that i'm answering now. i had to work in another projects. Now i'm back. ok, i used now same classes and with different ID's. And those ID's i used in my CSS-File. But now the main Problem is - "How can i use in Jquery with any other Animation in my code now?". I mean not only >slideDown, i.e. fadeIn, slideIn for each Data Object/Array Element another one and it should be exact this one, :)? - How can i use Data Object with second Button "jButton2" to catch that wich element is >actual animated or in data storage is. With this jButton2 i want rollback the animation and >for this i need to know wich element is actual there. Thanks for your Help!
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>
解决方案after reading some books and researching and try outs, worked the following code for my preceding problem (original code was found here but i can't find the link again, sorry). It's not perfect but i can use it for a halfway, :D. On a final solution i'm working now. By the way i had last 3 weeks vacation, so that's why it took so long, :).
Different Animationeffects coming soon!
So here we go:
// 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; }) });
这篇关于如何为每一个阵列的元素附加jQuery的不同Animationeffects？和动画逐个向前和向后带2个按键（返回＆安培;下一个）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
