jquery - 使用分页一次淡入淡出 2 个项目

Question

我有 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/

请建议。

Answer 1

您需要将.fadeIn()and.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/