.effect('slide'... 不显示下一个对象

Question

我在 Whosebug 上浏览滑块并找到了这个 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");
});

当我将 .animate 更改为 .effect 时，下一个 div 未显示。

JSFIDDLE 更改：http://jsfiddle.net/tHZLY/12/

Answer 1

问题是您对 show/hide divs 使用了 2 种不同的方法。

您应该使用 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:[=26 上混合使用 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'... 不显示下一个对象

.effect('slide'... not showing next object

javascript

jquery

jquery-ui

jquery-effects