JQuery 的 .show() 的第一次鼠标调用不显示动画答案

【问题标题】：First mouse call of JQuery's .show() does not display animationJQuery 的 .show() 的第一次鼠标调用不显示动画
【发布时间】：2011-01-10 17:34:13
【问题描述】：

大家好（第一次发帖！）。我是 JQuery 和 Javascript 新手。

我正在以下网站上工作：http://www.beautifulinteractions.com/lombo/

我用我自己的函数创建了一个自定义的 .js 文件，调用 JQuery 选择器和方法。我从标签中调用了 startup() 函数，两个 div（菜单和页脚）以正确的方式进入。

但是，第一次（也是第一次）我单击菜单元素（通过 onclick="javascript:showContent(URL)" 触发 .show() 调用）目标 div 变得可见但不会淡入- 它只是出现。每隔一次我点击一个菜单项，动画就可以正常工作。

我做错了什么？
感谢您的帮助。


millis = 600;

function startup() {
    $('#hiddenMenu').show(millis, foo());
    $('#footer').show(millis, foo());
    //$(""+"#hiddenContent"+"").show('slow', foo());
}

function showContent(URL) {
    $('#hiddenContent').hide(millis, function() {
                                        $('#hiddenContent').load(URL);
                                        $('#hiddenContent').show(millis, foo());
     });

}
function hideContent() {
    $('#hiddenContent').hide(millis, foo());
}

function foo() {
    //Do-Nothing
}`

【问题讨论】：

作为旁注，您需要引用才能将函数作为参数传递。你可以通过使用函数名来做到这一点，不带括号。

标签： jquery

【解决方案1】：

尝试将您的 showContent 函数替换为以下内容：

function showContent(URL) {
    $('#hiddenContent').hide(millis, function() {
        $(this).load(URL, function() {
            $(this).show(millis, foo());
        });
    });
}

这可能是由于$.load 调用在show 行执行之前没有完成。将.show 移动到$.load 的回调中可能会成功。

【讨论】：

@Jacopo - 试试@jAndy 的建议：$(this).show(millis, foo);
将 .show() 添加到 .load() 回调中就可以了。非常感谢。我很欣赏这一切。

【解决方案2】：

您已经尝试从startup() 函数中获取输出？通过控制台或警报？所以你知道你的脚本是否正在运行。

还有一点提示.. 当您使用 onclick 时，您不必使用 javascript:

所以你应该这样做：

onclick="startup();"

应该够了！

编辑：

让你变成这样：

var millis = 600;

如果没有 var，您的脚本将无法在 IE 中运行

【讨论】：

感谢您的宝贵提示。 startup() 与第二次调用中的 showContent(URL) 一样完美。