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()和 .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();

参见 fiddle :http://jsfiddle.net/amyamy86/gpmSP/