ID 更改时的 jQuery 动画

Question

我正在尝试使用 animate() 创建一个切换样式菜单。菜单显示但不再隐藏。这是 fiddle 。

http://jsfiddle.net/eenpK/2/

$("#menu2").on("click", function(){
$("#menu").animate({width: "200px"});
$("#menu2").attr("id", "menu2b");
});

$("#menub").on("click", function(){
$("#menu").animate({width: "-200px"}).css("overflow", "visible");
});

Answer 1

由于您要更改元素的 id，语法 $(element).on("click","sub-element",function()) 将起作用。

单击 #menu2b 时，您不会更改 id。

尝试:

$(document).on("click", "#menu2", function () {
    $("#menu").animate({
        width: "200px"
    });
    $("#menu2").attr("id", "menu2b");
});

$(document).on("click", "#menu2b", function () {
    $("#menu").animate({
        width: "-200px"
    }).css("overflow", "visible");
    $("#menu2b").attr("id", "menu2");
});

Updated fiddle here.