需要帮助在show/hide 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.

这将立即隐藏/显示元素,没有任何动画.FadeIn/Out可以提供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()直接在参数中使用声明a,而不是单独声明每个函数.或者我会说:

在参数范围内声明内联函数

快乐的编码!