.effect('幻灯片'..不显示下一个对象

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

本文关键字：一个对象 显示 effect 幻灯片      更新时间：2024-07-01

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

问题是您使用了两种不同的方法来显示/隐藏div。

您应该使用slide或width。

非.activediv的宽度在CSS中最初设置为0px，以便以后可以使用.animate({"width": 200})为其设置动画。但它不适用于.effect('slide', ...)，因为它实际上不会影响宽度属性。

在上应用.hide()时，.animate({"width": 0})不会使元素不可见

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

检查此实验。

要使用.effect('slide', ...)，您应该从div的CSS中删除width: 0px;，将所有.pagediv放在一个位置（出于演示目的，使用简单的position: absolute;），并且不要在prev/next上混合两种不同的显示/隐藏方法：

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

相关文章：