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

【问题标题】：Javascript jquery animate, toggling, doesn't work properlyJavascript jquery动画，切换，无法正常工作
【发布时间】：2011-01-31 14:08:52
【问题描述】：

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

你好 Stackoverflow，我尝试使用切换来切换动画功能，但上面显示的代码似乎不起作用？怎么了？

问候

【问题讨论】：

jQuery“toggle”函数用于设置响应交替点击的处理程序。此代码看起来像是在单击元素后尝试设置这些处理程序。这就是你想要的吗？
@Pointy，不！ hover(fn, fn) 这样做。
另外，您需要导入 jQuery UI 才能获得花哨的缓动方法。
@Cybrix 哦，你是对的，谢谢；我会编辑我的评论...
@Pointy 哈哈，我忘了是 jQuery UI，谢谢 =)

标签： javascript jquery toggle jquery-animate

【解决方案1】：

改变这个：

<body>

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

到这里：

<body onload="toggle();">

    <div id="tempc">

DEMO - except for easing

【讨论】：

当使用 jQuery 时，实际上没有必要在 body 标签中添加 onload。使用 $().ready() 要好得多。它更简单，并且将 HTML 和 JavaScript 分开。

【解决方案2】：

使用 jquery ready 函数在 pageload 上设置切换处理程序。从 div 中删除 onclick 处理程序。检查这个code。

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

【讨论】：

【解决方案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 库中的实现是默认值，称为摇摆，还有一个以恒定的速度前进，称为线性。更多缓动功能可以使用插件，最著名的是 jQuery UI 套房。

有关更多信息，请参阅 jQuery 文档：jQuery Animate()

【讨论】：