jQuery .animate（）對於簡單的水平滑塊不按預期工作

Question

我試圖修改這個jQuery滑塊解決方案：https://stackoverflow.com/a/9864636/908491（使用第一個解決方案 - http://jsfiddle.net/sg3s/rs2QK/）。

這是我的jsFiddle：http://jsfiddle.net/markrummel/KSHSX/。

的DIV滑動的作品就好了，但一個被滑出跳走，而不是在相同的速率DIV滑動滑動順暢了，我已經在CSS註釋掉在JavaScript .hide()和overflow:hidden ，這樣我可以看到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

我簡單地整理了一下，只是爲了向你展示它朝哪個方向發展。在大多數插件中都有一個左右滑動的包裝盒，而不是實際的盒子本身。這使事情變得更容易一些。

Have a look at the DEMO.

我添加了一個#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); 
}); 

Answer 2

您可以根據this plugin

$('#wrapper').cycle({ 
    fx:  'scrollHorz', 
    prev: '#prev', 
    next: '#next', 
    timeout: 0 
}); 

EXAMPLE HERE