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的持续时间，这实际上与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()，而不是单独声明每个函数。或者我会说：

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

快乐的编码！

需要帮助在show / hide div期间停止jquery动画

1 个答案:

最终解决方案：