오른쪽에서 슬라이드하는 대신 텍스트를 가져 오기

Question

코드를 Slide instead of Fade for a div에서 가져 와서 텍스트를 위쪽에서 슬라이드하는 대신 오른쪽에서 슬라이드를 가져 오려고합니다. 또한 자동 슬라이드를 수행하고 완료 후에도 루핑을 계속할 수있는 또 다른 방법이 있습니까? 여기

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에 대한 링크입니다 : 여기 JQuery와의

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

: 여기

는 HTML의 this 같은 http://jsfiddle.net/1c82yyt7/

Answer 1

무엇인가?

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');