Question

我正在浏览stackoverflow for slider并找到了这个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'});

选中experiment。

要使其与.effect('slide', ...)一起使用，您应该从div的CSS中删除width: 0px;，将所有.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

.effect（'slide'...没有显示下一个对象

1 个答案: