使用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/