删除课程后取出CSS动画

时间:2012-06-15 08:51:33

标签: jquery css css3

我有一个具有淡入和淡出过渡的滑块。它基本上循环并切换我的<li></li>元素,并将.current类添加到活动幻灯片中。看起来像这样<li class="current"></li>

您认为我的代码解决方案是什么? http://jsbin.com/evayaw/

我刚添加了一个按钮,可以在幻灯片上添加一个类(.active)来模仿我的滑块行为。每个幻灯片中的对象在父.active容器上添加<li>类时动画化。删除.active类后,它也应该转换出来。转换通常会执行相反的属性,例如。从opacity: 1;开始,它将转到opacity 0;或从left: 100;升级到left: 0;

类似: http://tympanus.net/Development/ParallaxContentSlider/ - 这与我现有的滑块使用不同的方法,所以我不能使用它。

1 个答案:

答案 0 :(得分:0)

http://jsbin.com/evayaw/35

如果你点击2然后再点击3然后再点击2,那么你想要的是什么?部分问题是当您删除.active时,它将不再有z-index:9999;。我添加了一个.unActive(也有z-index:9998;,还添加了一个`.delay'。

另外,使用href标签你会一直到页面顶部去除它们。 (我想我可以让它们停止默认行为,但我将a属性放入li,并且还给li一个鼠标指针属性。我的点击也使用了nth_of_type() ,但你可以删除它,只是帮助我确保你的按钮不是问题。

编辑:当您希望动画“反向”代替.object_#时,您放置.unActive .object_#