如果我单击图标，隐藏图像并使用fadeIn（）函数显示其他图像

Question

我有两个图标，左图标和右图标。如果我点击右图标，我想隐藏第一个图标的图像，然后我想使用fadeIn()功能显示正确图标的图像。但是，它并没有完全成功。如果我使用fadeIn()函数，它就不起作用。我有两个<div>具有不同的ID，一个是display：none。

这是我的代码：

<div class="item_set " id="images1" >
<div class="item_set " id="images2" style="display:none;">
    <div id="dot_block"><!--start dots-->
        <div id="dot1" class="dots current" ></div>
        <div id="dot2" class="dots" "></div>
    </div>
    <script>
    $(document).ready(function(){
      $('#dot2').click(function(){
         $('#images').hide().fadeIn(2000);
        $('#images2').show().fadeOut(3000);
        $('#dot2').css({'background':'#D0C083'});
        $('#dot1').css({'background':'#DBDBEA'});        
        $('#dot2').removeAttr('onclick');       
     });

    $('#dot1').click(function(){
        $('#images2').hide().fadeIn(2000);
        $('#image1').show().fadeOut(3000);
        $('#dot1').css({'background':'#D0C083'});
        $('#dot2').css({'background':'#DBDBEA'});              
        $('#dot1').removeAttr('onclick');       
      });
    });
    </script>