Javascript JQuery анимация, переключение, не работает должным образом - PullRequest
Новая
       22

Javascript JQuery анимация, переключение, не работает должным образом

0 голосов
/ 31 января 2011 
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
                #tempc {
                    background-color: #FFFF00;
                    width: 50px;
                    height: 50px;
                }
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

        <script type="text/javascript">
            function toggle(){
                $("#tempc").toggle(
                    function () {
                        $("#tempc").animate({width: 255, height: 300}, 1000, "easeInOutQuad")
                    },
                    function () {
                        $("#tempc").animate({width: 50}, 1000, "easeInOutQuad")
                    }
                );
            }
        </script>

    </head>
    <body>

        <div id="tempc" onclick="toggle();">
            Hello!
        </div>

    </body>
</html>

Hello Stackoverflow, Я пытаюсь использовать переключатель для переключения функций анимации, но приведенный выше код не работает? Что не так?

Привет

Ответы [ 3 ]

1 голос
/ 31 января 2011

Обработчик переключения установки на загрузка страницы с использованием функции jquery ready .Удалить обработчик onclick из div.Проверьте этот код . 

$(function (){
    $("#tempc").toggle(
        function () {
            $("#tempc").animate({width: 255, height: 300}, 1000);
        },
        function () {
            $("#tempc").animate({width: 50}, 1000);
        }
    );
});
1 голос
/ 31 января 2011

Изменить это: 

<body>

        <div id="tempc" onclick="toggle();">

К этому: 

<body onload="toggle();">

    <div id="tempc">

ДЕМО - за исключением смягчения

0 голосов
/ 31 января 2011

Попробуйте что-то вроде этого: 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
                #tempc {
                    background-color: #FFFF00;
                    width: 50px;
                    height: 50px;
                }
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    </head>
    <body>

        <div id="tempc">
            Hello!
        </div>
    <script type="text/javascript">
        $().ready(function(){
        $('#tempc').toggle(
            function(){
            $(this).animate({width: 255, height: 300}, 1000, 'linear')
                    },
                    function () {
                        $(this).animate({width: 50}, 1000, 'linear')
                    }
        );
        });
    </script>

    </body>
</html>

Обработчик onclick был удален из div, поскольку он не нужен при использовании jQuery.

Кроме того, экземпляры $('#tempc') в обратных вызовах были изменены на $(this). Это «правильный» способ ведения дел, и я считаю, что он более эффективен для движка Javascript (поправьте меня, если я ошибаюсь!).

Кроме того, вы пытались использовать функцию "easeInOutQuad" в качестве функции замедления. Согласно документам jQuery, поддерживаются только встроенные функции swing и linear:

Облегчение : Оставшийся параметр .animate () строка, называющая функцию замедления использовать. Функция замедления определяет скорость, с которой анимация прогрессирует в разных точках в анимация. Единственное смягчение реализации в библиотеке jQuery по умолчанию, называется качели, и один что прогрессирует в постоянном темпе, называется линейным. Больше функций ослабления доступны с использованием плагины, в первую очередь пользовательский интерфейс jQuery люкс.

Для получения дополнительной информации см. Документацию jQuery: jQuery Animate ()

...