fadeIn and fadeOut not working as expected

Question

In my code i've few images and i've tried to show them as slider so when a clickme button clicked the image will be change to next image.I have succssfully done this fucntion but i want animation ,when i click clickme button then current image should fadeOut and next image should be fadeIn, I'm unable to do this,

   $('#allimg li:first').addClass('activeimg');
  //code for like and next image  
   $('.clickme').on('click', function() {
    var tagname = $('.activeimg img').attr('name');
    if ( $('#allimg li.activeimg').index() + parseInt(1) !== $('#allimg li').length ) {
        $('.activeimg').removeClass('activeimg').fadeIn().next('#allimg li').addClass('activeimg').fadeOut();
       }
  });

Just a small help is needed,

Answer 1

here is a very basic implementation of fadeIn and fadeOut;

Since your code wasn't complete; I created my own;

Hope this helps

 $("button").click(function(){                
        $("#dog1").fadeOut("slow");
        $("#dog3").fadeIn("slow");
    });

#dog3 {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.pinimg.com/originals/b0/d7/08/b0d708c285de860ce5d51a8d558409dc.jpg" width ="100px" height="100px" id="dog1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" width ="100px" height="100px" id="dog3">
<button> Fade Images </button>