最好的动画算法？答案

【问题标题】：Best algorithm to animate?最好的动画算法？
【发布时间】：2013-09-07 15:58:15
【问题描述】：

我制作了这个脚本来为面板设置动画（打开-关闭）：

$(window).load(function () {
    var z = '';
    $("#painel").hide()
    $(".btvagas").click(function () {
        z++;
        $("#painel").animate({
            width: 'toggle'
        });
        if (z === 1) {
            $("#painel").animate({
                width: '400px'
            });
            $(".btvagas").animate({
                left: '336px'
            });
        } else {
            $(".btvagas").animate({
                left: '-65px'
            });
            z = 0;
        }
    })
});

您可以在此处查看所有带有 html 和 css 的代码： http://codepen.io/LuanPiegas/pen/wFyjG

但是，我是 jQuery 和 JavaScript 的新手，所以...有更好的方法来做到这一点，结果相同？

【问题讨论】：

这个更适合codereview.stackexchange.com。
实际上，为您想要做的动画制作“最佳”方式是使用 CSS3 变换。并非所有浏览器都支持它，因此您还需要回退到 jquery。看看这篇文章：html5rocks.com/en/tutorials/speed/html5 和这篇文章：paulirish.com/2012/…

标签： javascript jquery css jquery-animate

【解决方案1】：

您可以将$("#painel") 和$(".btvagas") 分配给变量，这样您就不必每次都调用jQuery 三次。

var $painel = $('#painel'), $btvagas = $(".btvagas");

您还可以对 width 和 left 属性使用数字而不是字符串，因为您使用的是像素。

.animate({ left: 336 })

至于算法本身。我认为通过查看代码并不能清楚地看到它的作用，因此它肯定可以使用一些工作。我正在准备面试，所以我想从头开始尝试这种模式。这是我想出的。您可以从 .pulltab 元素中删除 .use-css-transitions 类以改用 jQuery 动画。我希望这会有所帮助！

http://jsbin.com/iSaPaNI/2/edit?js,output

【讨论】：

感谢@Bill Criswell！

【解决方案2】：

$('#foo').toggle(function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

JSFIDDLE DEMO

【讨论】：

toggle 事件方法在 jQuery 1.8 中被弃用并在 jQuery 1.9 中被移除。
...这就是为什么它只有在选择 jQuery 1.6 时才能在小提琴中工作。如果你点击 OP 的 codepen 链接，你会看到他使用的是 1.10。