Horizontal slide animation using jQuery 1.7.2.?

问题

Can anyone suggest a way to implement a horizontal slide animation using the jQuery 1.7.2 library with out the jQueryUI library. So far with this set up I've managed to implement a vertical slide using

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

And a fade in using:

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

Also please not I have ruled out using CSS for the transition because as far as I can tell you can't do a call back function that way.

回答1:

You can use jQuery's animate function: fiddle

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

Originally found here: http://bueltge.de/test/jquery_horizontal_slide.php

回答2:

You could use the effects module from 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(just to see some outlining)

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

Jsfiddle: http://jsfiddle.net/HAQyK/1238/

来源：https://stackoverflow.com/questions/25560558/horizontal-slide-animation-using-jquery-1-7-2