Jquery toggle not sliding

问题:

can anybody assist me with fixing my jquery animation that im trying to get to open from left to right?

It opens but i want it to slide instead.

Please see demo http://jsfiddle.net/EY9t7/

$(function(){
    $('.search-charts-go').click(function (e) {
    e.stopPropagation();
    if($('.search-container-wrap').hasClass('visible')) {
        $('.search-container-wrap').stop().hide('slide', {direction: 'left'}, 500).removeClass('visible');
    } else {
        $('.search-container-wrap').stop().show('slide', {direction: 'left'}, 500).addClass('visible');
    }
   });
});

Thanks in advance

Paul

回答1:

You could use .animate() to slide in width like so for example:

$(function(){
    $('.search-charts-go').click(function (e) {
    e.stopPropagation();
    if($('.search-container-wrap').hasClass('visible')) {
        $('.search-container-wrap').stop().animate({
            'width' : '0'
        }, 1000, function(){
            $(this).removeClass('visible')
        });
    } else {
        $('.search-container-wrap').addClass('visible').stop().animate({
            'width' : '400'
        }, 1000);
    }
   });
});

And here is a fiddle: http://jsfiddle.net/uyWNH/

If you want to use show / hide for this, you will have to add jQuery UI... which might be a little bit overload, if you use it only for his...