jQuery .animate() 用于简单的水平滑块无法按预期工作

Question

我试图修改这个 jQuery 滑块解决方案：https : //stackoverflow.com/a/9864636/908491（使用第一个解决方案 - http://jsfiddle.net/sg3s/rs2QK/）。

这是我的 jsFiddle：http : //jsfiddle.net/markrummel/KHSSX/。

DIV 滑入工作正常，但滑出的跳出，而不是以与 DIV 滑入相同的速度平滑滑出。我已.hide()在 javascript 和overflow:hiddenCSS 中注释掉，以便我可以看到在哪里被滑出的 DIV 消失了。

这是我第一次使用.animate()，因此非常感谢您提供的任何帮助！

这是我的javascript：

$('.date-nav-prev').click(function () {
    $('.date-nav-next').show();
    var current = $('.visible-actions');
    var prev = current.prev('.user-actions');
    current.removeClass('visible-actions').animate({
        left: current.width()
    }, 500, function() {
        //current.hide();
    });
    prev.addClass('visible-actions').show().css({
        left: -(prev.width())
    }).animate({
        left: 0
    }, 500);
});

$('.date-nav-next').click(function () {
    var current = $('.visible-actions');
    var next = current.next('.user-actions');
    current.removeClass('visible-actions').animate({
        left: -(current.width())
    }, 500, function() {
        //current.hide();
    });
    next.addClass('visible-actions').show().css({
        left: prev.width()
    }).animate({
        left: 0
    }, 500);
});

HTML：

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button><br />
<div id="wrapper">
  <div class="user-actions daysAgo2">
      Actions from 2 Days Ago</div>
  <div class="user-actions yesterday">
      Yesterday's Actions</div>
  <div class="user-actions today visible-actions">
      Today's Actions</div>
</div>

CSS：

.user-actions.yesterday, .user-actions.daysAgo2, .date-nav-next {display:none;}
#wrapper{width:250px; height:300px; border:1px solid #333;position:relative; float:left;
 /*overflow:hidden;*/
}
.user-actions {width:100%; height:100%; position:relative; float:left; overflow:hidden; margin:0;}
.today {background:green;}
.yesterday {background:yellow;}
.daysAgo2 {background:orange;}

Answer 1

我把整个事情简单化了一点，只是为了向你展示它可以朝哪个方向发展。在大多数插件中，都有一个左右滑动的包装盒，而不是实际的盒子本身。这让事情变得容易一些。

看看演示。

我添加了一个#slider左右滑动的div：

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button>
<div id="wrapper">
    <div id="slider">
        <div id="daysAgo2">Actions from 2 Days Ago</div>
        <div id="yesterday">Yesterday's Actions</div>
        <div id="today">Today's Actions</div>
    </div>
</div>

将包装器设置overflow:hidden;为隐藏当前幻灯片过去或之前的所有内容：

#wrapper{
    width:300px; 
    height:300px; 
    border:1px solid #333;
    position:relative; 
    overflow:hidden;
}
#slider {
    width: 1000px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:300px; 
    height:100%; 
    float:left; 
}
#today{background:green;}
#yesterday {background:yellow;}
#daysAgo2 {background:orange;}

只需左右滑动滑块，就可以了。当然，扩展此类滑块没有限制。

var sliderWidth = 300;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

$('.date-nav-prev').click(function () { 
    $('#slider').animate({left: '+='+sliderWidth}, 500);
});

$('.date-nav-next').click(function () {
    $('#slider').animate({left: '-='+sliderWidth}, 500);
});