使用 jQuery 1.7.2 的水平幻灯片动画。？答案

【问题标题】：Horizontal slide animation using jQuery 1.7.2.?使用 jQuery 1.7.2 的水平幻灯片动画。？
【发布时间】：2014-08-29 01:50:06
【问题描述】：

任何人都可以建议一种使用 jQuery 1.7.2 库而不使用 jQueryUI 库来实现水平幻灯片动画的方法。到目前为止，通过这个设置，我已经设法使用

实现了垂直幻灯片

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

使用淡入淡出：

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

另外，请不要排除使用 CSS 进行转换的可能性，因为据我所知，您不能以这种方式执行回调函数。

【问题讨论】：

【解决方案1】：

你可以使用jQuery的animate函数：fiddle

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

【讨论】：

【解决方案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; 
}

【讨论】：