jQuery平滑过渡.removeClass / .addClass atr

Question

我正在用css和jquery做一个“图像库”，我想通过点击按钮在图像之间切换。我已经完成了删除/添加类，因为它更容易，我知道我可以用“动画”来做它，但它对我来说非常复杂。

我不想使用预先制作的滑块，所以，如果你可以帮助我，我会贬低它！

的jsfiddle：

http://jsfiddle.net/CWkQE/

我想这样的事情是可能的：

$("something").addClass("someclass",1000); /* i mean adding ,1000 */

Answer 1

如果我理解正确，您希望在切换图像时进行平滑变换。一种解决方法是使用绝对定位将两个元素放在另一个上面，并使用fadeIn和fadeOut函数，这些函数需要毫秒作为可选参数。

简化的样本将是这样的。

HTML：

<ul>
    <li id="element1">A</li>
    <li id="element2" class="hide">B</li>
</ul>

CSS：

ul {position: relative; height: 200px; }
li {position: absolute; }
.hide {display: none;}

然后代替：

$("#element1").addClass("hide")
$("#element2").removeClass("hide")

你可以做到

$("#element1").fadeOut(1000)
$("#element2").fadeIn(1000)

请在此处查看示例中的概念：http://jsfiddle.net/CWkQE/14/