Question

I’m making a feature slider with jquery and i want when tab with id #second clicked to replace other images with #s2 image.

I tried

$(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();
        });
    });

but it works but if i click #first all images disappear

Answer 1

I am not sure I understand, but what I always forget with fadeIn()/fadeOut() is that they are animations and happen asynchronously.

So, your call to $(“#s1”).fadeIn(); will start, but the following .remove() calls will seemingly happen at the same time.

What you need to do is change the fadeIn() call to use the callback function:

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

That way, all of the remove calls will not happen until after the fadeIn() completes.

Update:

From your comment, I think this might be a better answer: You are using .remove() but that removes the elements from the page… no way to get them back. What you want to do is use .hide() to hide the elements, so that later they can have .fadeIn() called on them to show them.

$(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();
    });

});