使用jQuery 1.7.2制作水平幻灯片动画

Question

有人能提出一种方法，在没有jQueryUI库的情况下使用jQuery 1.7.2库来实现水平幻灯片动画吗。到目前为止，通过这个设置，我已经成功地使用实现了垂直幻灯片

$('#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; 
}

Js文件：http://jsfiddle.net/HAQyK/1238/