.removeClass/.addClass atr 上的 jQuery 平滑过渡

Question

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

我不想使用预制 slider ，所以，如果你能帮助我，我会很感激!

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/