jQuery Animation在IE9和Firefox 5中不起作用

Question

Here's the source, am I missing something? 这是消息来源，我有什么遗漏吗？
I tried it here , and it works, but on my PC it's not working. 我在这里尝试过，并且可以使用，但是在我的PC上无法使用。
--EDIT - 编辑
I used jquery min v1.4.1, it didn't work, so I downloaded latest version, still not working, on the link I used google's jquery SDN which is v1.5.1. 我使用的是jquery min v1.4.1，它无法正常工作，因此我在使用Google的jquery SDN v1.5.1的链接上下载了最新版本，但仍无法正常工作。

<html>
    <head>
    <title>Test</title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $('document').ready(function() {
        $('#bio > div').hide();
        $('#bio > div:first').show();
    });
    $('#bio h3').click(function() {
        alert('called');
        $(this).next().animate(
            {'height':'toggle'}, 'slow', 'swing'
        );
    });
    $('p:first').animate(
        {
        height: '+=100px',
        backgroundColor: 'green'
        },
        {
            duration: 'slow',
            easing: 'swing',
            complete: function() {alert('done!');},
            queue: false
        }
    );
    </script>
    </head>
    <body>

        <div id="bio">
            <h2>Who’s Hot Right Now?</h2>
            <h3>Beau Dandy</h3>
            <div>
                <img src="../images/beau_100.jpg" width="100"
                    height="100" alt="Beau Dandy"/>
                <p>Content about Beau Dandy</p>
            </div>
            <h3>Johnny Stardust</h3>
            <div>
                <img src="../images/johnny_100.jpg" width="100"
                height="100" alt="Johny Stardust"/>
                <p>Content about Johny Stardust</p>
            </div>
            <h3>Glendatronix</h3>
            <div>
                <img src="../images/glenda_100.jpg" width="100"
                    height="100" alt="Glendatronix"/>
                <p>Content about Glendatronix</p>
            </div>
        </div>
    </body>
</html>

Answer 1

I think your document.ready was being closed too soon. 我认为您的document.ready太早关闭了。

I simply moved the brackets }); 我只是移动了括号}); to the end of your script... 到脚本结尾...

<script type="text/javascript">
$('document').ready(function() {
    $('#bio > div').hide();
    $('#bio > div:first').show();
    $('#bio h3').click(function() {
        alert('called');
        $(this).next().animate(
            {'height':'toggle'}, 'slow', 'swing'
        );
    });
    $('p:first').animate(
        {
        height: '+=100px',
        backgroundColor: 'green'
        },
        {
        duration: 'slow',
        easing: 'swing',
        complete: function() {alert('done!');},
        queue: false
        }
    );
});
</script>

Why? 为什么？ For example, you're trying to bind events like .click() to an element called #bio h3 . 例如，您尝试将#bio h3 .click()类的事件绑定到名为#bio h3的元素。 However, the element #bio h3 might not yet even exist yet in the DOM since you're calling the script in the <head> . 但是，由于您正在<head>调用脚本，因此#bio h3元素可能甚至在DOM中都不存在。 Using document.ready ensures the DOM exists before executing the code within. 使用document.ready可确保DOM在执行其中的代码之前存在。

Why it works in some browsers is likely a simple timing issue. 为什么在某些浏览器中起作用，可能是一个简单的计时问题。

jQuery Animation在IE9和Firefox 5中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-08-31 14:05:11

jQuery Animation在IE9和Firefox 5中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-08-31 14:05:11

解决方案1
1 已采纳 2011-08-31 14:05:11