使用jQuery 1.7.2的水平滑動動畫。

Question

任何人都可以提出一種方法來實現一個水平滑動動畫使用jQuery 1.7.2庫與jQueryUI庫。到目前爲止，這一套了，我已經成功地實現在使用使用

$('#selectorId').fadeIn(1000); 

和垂直滑動淡入：

$('#selectorId').slideToggle('slow'); 

也請不我已經排除了使用CSS的過渡因爲盡我所能告訴你不能以這種方式做回調函數。

Answer 1

您可以使用jQuery的animate功能：fiddle

$('#toggle').click().toggle(function() { 
    $('#box').animate({ width: 'hide' }); 
}, function() { 
    $('#box').animate({ width: 'show' }); 
}); 

這裏最初發現：http://bueltge.de/test/jquery_horizontal_slide.php

Answer 2

您可以使用效果模塊從jQueryUI的。

<a href="#" id="slidetoggle"> 
    Slide toggle the box 
    <div id="box">This is the box that will be toggled</div> 
</a> 

JQuery的

//hide box per default 
$('#box').hide(); 
$('#slidetoggle').click(function() { 
    $('#box').toggle('slide', 400); 
    return false; 
}); 

CSS（剛剛看到一些大綱）

#box { 
    background: #EEE; 
    border: 1px solid #900; 
    height: 135px; 
    display: none; 
} 

的jsfiddle： http://jsfiddle.net/HAQyK/1238/