jquery - 分页时一次淡出2个元素

我有jQuery分页代码工作。我想同时为两个项目添加淡入淡出。

<ul class="paging">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

这是我的演示。

http://jsfiddle.net/squidraj/6KRez/2/

请提出建议。

最佳答案

您需要将.fadeIn()和.fadeOut()应用于<ul class="paging">而不是<li>。这是因为如果您执行$('li').fadeIn()，则jQuery会依次将淡入淡出效果应用于每个元素。如果您要执行$('ul').fadeIn()，则jQuery将对整个<ul>（包括<li>元素）应用淡入淡出的动画效果，在您的情况下，一次只显示2个。所以....

不仅仅是：

// show/hide the appropriate regions
selector.children().hide();
selector.children(".simplePagerPage" + options.currentPage).show();

您需要这样做：

$('ul.paging').fadeOut(400, function() {
     // finished fading out animation
     //hide and show relevant links
     selector.children().hide();
     selector.find(".simplePagerPage" + clickedLink).show();
}).fadeIn();

参见小提琴：http://jsfiddle.net/amyamy86/gpmSP/

关于jquery - 分页时一次淡出2个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15594228/