我正在尝试为我的对象一个一个地制作动画。我正在使用 animate.css 制作动画。假设我有 7 个 li
元素,如下例所示,它一次都是缩放的,但我希望 product 1 会先缩放 1,然后缩放 2,3.4---7但每个都会延迟 1 秒或 10 毫秒,例如:
<li class="animated zoomIn prod pos1">product 1</li>
<li class="animated zoomIn prod pos2">product 2</li>
<li class="animated zoomIn prod pos3">product 3</li>
<li class="animated zoomIn prod pos4">product 4</li>
<li class="animated zoomIn prod pos5">product 5</li>
<li class="animated zoomIn prod pos6">product 6</li>
<li class="animated zoomIn prod pos7">product 7</li>
我看到 animate.css 文件说延迟使用 -vendor-animation-delay: 2s;
我试过了,但仍然没有成功。
演示:http://jsfiddle.net/cyber007/6x9re4yf/
另外我也在尝试。每当我点击其中任何一个对象时,它都会像一个一个一样缩小。知道我该怎么做吗?
最佳答案
你的-vendor-animation-delay: 2s;
应该是animation-delay: 2s;
这很好用:
animation-delay: 2s;
additional I am also trying. when ever I click on any of them object it will zoomout same like one by one. Any idea how can I do that
像这样添加一个 jquery 事件:
$(document).ready(function(){
$(".animated").click(function(){
$(".hexagonarea li.pos1").delay(1).animate({width:"0px",height: "0px"});
$(".hexagonarea li.pos2").delay(500).animate({width:"0px",height: "0px"});
//add other pos3,pos4..... here
});
});
看这里: http://jsfiddle.net/0Lv8ycju/
更新:您还必须将 jquery 库包含到文档的头部
我设法用 each() 做了一个简单的循环,用一个小片段一个一个地 zoumOut,所以这里是:
$(document).ready(function(){
$(".animated").click(function(){
var i=1; //delay time
var y=1;
$( "li" ).each(function( index ) {
$(".hexagonarea li.pos"+y).delay(1+i).animate({width:"0px",height: "0px"});
$(".hexagonarea li.pos"+y).css({overflow:"hidden"});
i+=100;// increase this to increase delay time (miliseconds)
y+=1;
});
});
});
关于jquery - 如何一个一个地动画对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30923268/