jquery - 需要帮助在显示/隐藏 div 期间停止 jquery 动画

Question

我的网站左栏有一个菜单，单击链接时，各种 div 显示/隐藏在网站的中心栏。工作正常(jquery 和 html 代码如下)。

问题是，当 div 加载到中心列时，jquery 会产生动画 - 右列滑到左列(隐藏中心)，然后滑回到左侧。我尝试调整 hide 和 fadeIn 函数，但无法停止动画。

我想知道如何阻止这个动画的发生。

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>

Answer 1

嗯，首先，如果你想隐藏某些东西，并且不希望它动画化，你只需使用 .hide()或.show()不带任何参数，或者将持续时间设置为 0。

这将立即隐藏/显示元素，没有任何动画。淡入/淡出可以提供 0 的持续时间，这将有效地执行与隐藏/显示相同的操作。

所以这个

$('#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()，而不是单独声明每个函数。或者正如我所说:

declaring inline functions within parameter scope

祝你编码愉快!