动画的最佳算法

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

Answer 2

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

JSFIDDLE 演示