Question

我从头开始制作这个滑出式侧面板：http://jsfiddle.net/kirkbross/ts3s3yx4/4/

我没有使用预先构建的脚本，因为我试图提高我的原始编码技能。我的方法有点不可预测和毛躁......当你点击OPEN时，红色面板有时会在下面的包裹线上闪烁，我觉得这个概念可能会有一个完全不同的，更简单的方法吗？

$(function() {
    $("#open").click(function() {
        openPanel();
    });

    $("#close").click(function() {
        closePanel();
    });
});

function openPanel() {

    $(".left-box").animate({
        width: "65%"
    }, 100);
    $(".panel").animate({
        width: "25%"
    }, 100)

}

function closePanel() {
    $(".panel").css("width", "0");
    $(".left-box").animate({
        width: "90%"
    }, 100);
}

Answer 1

看起来没问题...这是一个简单的编辑，可以停止闪烁，并简化点击处理程序：

$(function() {
    $("#open").click(openPanel);
    $("#close").click(closePanel);
});

function openPanel() {
    $(".left-box").css('margin-right', '0%').animate({
        width: "65%"
    }, 100);
    $(".panel").animate({
        width: "25%"
    }, 100)
}

function closePanel() {
    $(".panel").css("width", "0");
    $(".left-box").animate({
        width: "90%"
    }, 100, function(){$(".left-box").css('margin-right', '')});
}

See this update

这种滑出式侧板的更好方法是什么？

1 个答案: