.effect（'slide'...沒有顯示下一個對象

Question

我瀏覽了stackoverflow的滑塊，發現這個http://jsfiddle.net/skram/tHZLY/2/ （不知怎的，我找不到話題......）代碼：

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');
    var $next = $cur.next();

    if ($next.length == 0) return;

    $cur.removeClass('active');
    $next.addClass('active');

      $('.page').not('.active').effect('slide',{direction:'right',mode:'hide'});
      $('.active').effect('slide',{direction:'right',mode:'show'});
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});

當我用.effect更改.animate時，下一個div沒有顯示。

JSFIDDLE的變化： http ： //jsfiddle.net/tHZLY/12/

Answer 1

問題是你使用2種不同的方法來顯示/隱藏div。

您應該使用slide或width 。

非.active div的寬度最初在CSS中設置為0px ，以便稍后可以使用.animate({"width": 200})對它們進行動畫處理。 但它不能與.effect('slide', ...)因為它實際上不會影響width屬性。

.animate({"width": 0})不會使元素不可見，而你正在應用.hide() ：

.effect('slide',{direction:'right',mode:'hide'});

檢查此實驗 。

---

要使用.effect('slide', ...) ，你應該刪除width: 0px; 從div的CSS中，將所有.page div放在一個位置（出於演示目的使用簡單position: absolute; ）並且不要在prev / next上混合使用2種不同的show / hide方法：

// hide not active divs:
$('.page:not(.active)').hide();
$('#nxt').click(function(){
    var $cur = $('.page.active');
    var $next = $cur.next('.page');

    if ($next.length == 0) return;

    $cur.removeClass('active').effect('slide',{direction:'left',mode:'hide'});
    $next.addClass('active').effect('slide',{direction:'right',mode:'show'});
});

$('#prev').click(function() {
    var $cur = $('.page.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    // do not mix up .aniamte(width) with .effect(slide)!
    $cur.removeClass('active').effect('slide',{direction:'right',mode:'hide'});
    $prev.addClass('active').effect('slide',{direction:'left',mode:'show'});
});

DEMO