Question

我正在制作一个带有jquery的功能滑块，我想在点击了#second的标签时用＃s2图像替换其他图像。

我试过

$(document).ready(function() {
    $("#second").click(function(){
    $("#s1").remove();
    $("#s3").remove();
    $("#s4").remove();
    $("#s5").remove();
    $("#s2").fadeIn();
    });
});
 $(document).ready(function() {
        $("#first").click(function(){
        $("#s1").fadeIn();
        $("#s3").remove();
        $("#s4").remove();
        $("#s5").remove();
        $("#s2").remove();
        });
    });

但它有效，但如果我点击#first所有图像消失

Answer 1

我不确定我理解，但我总是忘记fadeIn（）/ fadeOut（）是它们是动画并且是异步发生的。

所以，你打电话给$（“＃s1”）。fadeIn（）;将启动，但以下.remove（）调用似乎会同时发生。

您需要做的是更改fadeIn（）调用以使用回调函数：

$("#s1").fadeIn('normal', function() {
    $("#s3").remove();
    $("#s4").remove();
    $("#s5").remove();
    $("#s2").remove();
});

这样，直到fadeIn（）完成后才会发生所有删除调用。

<强>更新

从你的评论中，我认为这可能是一个更好的答案：你正在使用.remove（）但是从页面中删除元素......没办法让它们回来。你想要做的是使用.hide（）隐藏元素，以便稍后他们可以调用.fadeIn（）来显示它们。

$(document).ready(function() {
    $("#second").click(function(){
        $("#s1").hide();
        $("#s3").hide();
        $("#s4").hide();
        $("#s5").hide();
        $("#s2").fadeIn();
    });

    $("#first").click(function(){
      $("#s3").hide();
      $("#s4").hide();
      $("#s5").hide();
      $("#s2").hide();
      $("#s1").fadeIn();
    });

});

jQuery删除多个元素和fadeIn元素

1 个答案: