需要帮助在显示/隐藏div期间停止jquery动画 [英] need help stopping jquery animation during show/hide div

问题描述

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

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).

问题在于，当div加载到中间列时，jquery正在制作动画-右边的列滑到左边的列(隐藏中间)，然后再滑动到左边.我试过调整hide和fadeIn函数，但无法停止动画.

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>

推荐答案

嗯，首先，如果您想隐藏某些东西，并且不希望它动画，则只需使用 .hide() 或

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.

这将立即隐藏/显示元素，而没有任何动画.可以将FadeIn/Out的持续时间设置为0，这将有效地执行与hide/show相同的操作.

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.

所以

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

成为这个

$('#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.

以下是您应该如何构造解决方案的建议:

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;
});

您可以直接在参数中使用声明 function()来代替单独声明每个函数.或正如我所说的那样:

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

祝您编程愉快！

这篇关于需要帮助在显示/隐藏div期间停止jquery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！