need help stopping jquery animation during show/hide div

问题

I have a menu on the left column of my site and when the links are clicked, various divs show/hide in the center column of the site. Works fine (jquery and html code below).

The issue is that when the divs are loading in the center column, the jquery is animating--the right column slides over to the left column (hiding the center) and then slides back over to the left. I've tried tweaking the hide and fadeIn functions, but can't stop the animation.

I want to know how to stop this animation from happening.

JQUERY

$(document).ready(function() {  

    var hash = [removed].hash.substr(1);  
    var href = $('#nav li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)  
        }  
    });  

    $('#nav li a').click(function(){  

    var toLoad = $(this).attr('href')+' #content';  
    $('#content').hide('fast',loadContent);
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');
    [removed].hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });
});

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>

回答1:

Hm, first of all, if you want to hide something, and you don't want it to animate you just use .hide() or .show() without any parameters, or you set duration to 0.

This will instantly hide/show the element, without any animation. FadeIn/Out can be supplied with a duration of 0, which would effectively do the same thing as hide/show would.

So this

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

becomes this

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

If you want to make more advanced animations, or queue up animations appropriately, ie, wait for animation to finish, check out the JQuery .animate() function, it let's you control much more of the animation.

Final solution:

Here's a suggestion how you should construct your solution instead:

$('#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;
});

Instead of declaring each function individually, you can just use declare a function() directly in the parameters. Or as I would put it:

declaring inline functions within parameter scope

Happy coding!

来源：https://stackoverflow.com/questions/8656857/need-help-stopping-jquery-animation-during-show-hide-div

标签

jquery

animation