javascript - 最好的动画算法？

Question

我制作了这个脚本来为面板设置动画(打开-关闭):

$(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 的新手，所以...有更好的方法来做到这一点，而且结果相同吗？

Answer 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