Question

<!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，我尝试使用切换来切换动画功能，但上面显示的代码似乎不起作用？有什么问题？

问候

Answer 1

改变这个：

<body>

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

对此：

<body onload="toggle();">

    <div id="tempc">

DEMO - except for easing

Answer 2

使用jquery ready 功能在 pageload 上设置切换处理程序。从div中删除onclick处理程序。请检查此code。

$(function (){
    $("#tempc").toggle(
        function () {
            $("#tempc").animate({width: 255, height: 300}, 1000);
        },
        function () {
            $("#tempc").animate({width: 50}, 1000);
        }
    );
});

Answer 3

尝试这样的事情：

<!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库中的实现是默认的，叫做swing，还有一个这是以不断的进步，称为线性。更多的缓和功能可以使用插件，最着名的是jQuery UI 套件。

有关详细信息，请参阅jQuery文档：jQuery Animate()

Javascript jquery动画，切换，无法正常工作

3 个答案: