0

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

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

4

2 回答 2

0

您可以将$("#painel")和分配$(".btvagas")给变量，因此您不必每次对它们调用 jQuery 三次。

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

由于您使用的是像素，因此您还可以对widthand属性使用数字而不是字符串。left

.animate({ left: 336 })

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

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

于 2013-09-07T16:58:31.250 回答
-1 
$('#foo').toggle(function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

JSFIDDLE 演示

于 2013-09-07T16:03:05.497 回答