jQuery Animation не работает в IE9 и Firefox 5 - PullRequest
Новая
       2

jQuery Animation не работает в IE9 и Firefox 5

0 голосов
/ 31 августа 2011

Вот источник, я что-то упустил?
Я попробовал это здесь , и это работает, но на моем компьютере это не работает.
--EDIT
Я использовал jquerymin 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>

1 Ответ

1 голос
/ 31 августа 2011

Я думаю, что ваш document.ready был закрыт слишком рано.

Я просто переместил скобки }); в конец вашего сценария ... 

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

Почему? Например, вы пытаетесь привязать события типа .click() к элементу с именем #bio h3. Однако элемент #bio h3 может еще даже не существовать в DOM, поскольку вы вызываете сценарий в <head>. Использование document.ready гарантирует, что DOM существует до выполнения кода внутри.

Почему это работает в некоторых браузерах, вероятно, простая проблема с синхронизацией.

...