獲取文本從右而不是從頂部滑入

Question

我從Slide instead of Fade for a div獲取了代碼，我試圖讓文本從右側滑入而不是從頂部滑入。另外，是否有另一種方式讓它自動滑動並在完成後繼續循環？

這裏的HTML：

<div class="slides"> 
    <div>test 1</div> 
    <div>test 2</div> 
    <div>test 3</div> 
    <div>test 4</div> 
    <div>test 5</div> 
    <div>test 6</div> 
    </div> 

    <ul class="btns"> 
    <li class="one"><a href="#">test</a></li> 
    <li class="two"><a href="#">test 2</a></li> 
    <li class="three"><a href="#">test 3</a></li> 
    <li class="four"><a href="#">test 4</a></li> 
    <li class="five"><a href="#">test 5</a></li> 
    <li class="six"><a href="#">test 6</a></li> 
    </ul> 

這裏是Jquery的：

var $btns = $('.btns a'), $slides = $('.slides > div'); 

$btns.click(function(){ 
    $(this).addClass('current') 
    $(this).parent().siblings().find('a').removeClass('current'); 
    $slides.eq($btns.index(this)).slideDown().siblings().slideUp(); 
    return false; 
}); 
$btns.first().click(); 

這裏也是到的jsfiddle鏈接：http://jsfiddle.net/1c82yyt7/

Answer 1

像this？

CODE

var $btns = $('.btns a'), $slides = $('.slides > div'); 

$btns.click(function(){ 
    $(this).addClass('current') 
    $(this).parent().siblings().find('a').removeClass('current'); 
    $slides.eq($btns.index(this)).animate({"width":"toggle"},1000).siblings().hide(); 
    return false; 
}); 
$btns.first().trigger('click');