нужна помощь в остановке анимации jquery во время показа / скрытия div

Question

У меня есть меню в левой колонке моего сайта, и когда по ссылкам нажимают, различные дивы отображаются / скрываются в центральной колонке сайта. Работает нормально (код jquery и html ниже).

Проблема заключается в том, что когда div загружается в центральный столбец, jquery анимируется - правый столбец перемещается в левый столбец (скрывая центр), а затем скользит обратно влево. Я пытался настроить функции hide и fadeIn, но не могу остановить анимацию.

Я хочу знать, как остановить эту анимацию.

Jquery

* * 1010

HTML

<div id="leftcol">

<div id="usermenu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option2">Option 3</a></li><br />
</ul>
</div>
</div>

Answer 1

Хм, прежде всего, если вы хотите что-то скрыть и не хотите, чтобы это оживляло, вы просто используете .hide() или .show() без каких-либо параметровили вы установили длительность на 0.

Это мгновенно скроет / покажет элемент без какой-либо анимации.FadeIn / Out может быть предоставлен с продолжительностью 0, что фактически сделает то же самое, что и Hide / Show.

Так что

$('#content').hide('fast', loadContent); 

становится этим

$('#content').hide(0, loadContent);

Если вы хотите создавать более сложные анимации или ставить анимации в очередь соответствующим образом, т. Е. Дождаться завершения анимации, проверьте функцию JQuery .animate(), она позволит вам контролировать гораздо больше анимации.

Окончательное решение :

Вот совет, как вместо этого построить свое решение:

$('#nav li a').click(function(){  
    var toLoad = $(this).attr('href')+' #content';  

    //hide content, add loader to wrapper
    $('#content').hide();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    [removed].hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  

    //load data
    $('#content').load(toLoad,'', function(){
        //hide the loader once the data has been loaded
        $('#load').fadeOut('normal', function(){
            //once the fadeout is done animating, remove the loader
            $('#load').remove();
        });
        $('#content').show();
    });
    return false;
});

Вместо того, чтобы объявлять каждую функцию отдельно, выможно просто использовать объявить function() непосредственно в параметрах.Или, как я бы сказал:

объявление встроенных функций в области действия параметра

Удачного кодирования!