替换图像onclick

Question

我有我的代码问题，我试图用点击（缓慢淡出）与另一个图像/ div替换图像/ div。然后当第二个图像被点击时，它会回到原来的状态。

我设法得到了这么多，但我有两个问题。

1 - 似乎无法隐藏页面加载中的第二个和第四个图像，因此只有在应用点击后才会显示。

2 - 我希望能够在同一页面上多次执行此操作，但使用目前为止的代码，它仅适用于关闭images/div的代码。

请帮忙。

HTML

<div><!-- Page wrapper-->  

    <div id= "first"> 
     <a href="#" id="next"> 
      <img src="images/yb2.svg" style="height: 160px; width: 160px;"> 
     </a> 
    </div> 
    <div id="second"> 
     <a href="#" id="back"> 
      img src="images/ss-1a.jpg"> 
    </div> 
    <div id= "third"> 
     <a href="#" id="next1"> 
      <img src="images/yb2.svg" style="height: 160px; width: 160px;"> 
     </a> 
    </div> 
    <div id="forth"> 
     <a href="#" id="back2"> 
      <img src="images/ss-1a.jpg"> 
    </div> 

</div><!-- end of page wrapper--> 

jQuery的

$('#next').click(function(e){ 
    e.preventDefault(); 
    $('#first').fadeOut('slow', function(){ 
     $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back').click(function(e){ 
    e.preventDefault(); 
    $('#second').fadeOut('slow', function(){ 
     $('#first').fadeIn('slow'); 
    }); 
}); 
$('#next1').click(function(e){ 
    e.preventDefault(); 
    $('#third').fadeOut('slow', function(){ 
     $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back2').click(function(e){ 
    e.preventDefault(); 
    $('#forth').fadeOut('slow', function(){ 
      $('#first').fadeIn('slow'); 
    }); 
}); 

Answer 1

只是没带以下调整一个Fiddle：1） - 隐藏的div的ID #second和#forth我刚刚添加CSS

#second, #forth { 
    display:none; 
} 

而且就像我认为它的目的是为了2）我调整了鳕鱼e如下：

$('#next').click(function (e) { 
    e.preventDefault(); 
    $('#first').fadeOut('slow', function() { 
    $('#second').fadeIn('slow'); 
    }); 
}); 
$('#back').click(function (e) { 
    e.preventDefault(); 
    $('#second').fadeOut('slow', function() { 
    $('#first').fadeIn('slow'); 
    }); 
}); 
$('#next1').click(function (e) { 
    e.preventDefault(); 
    $('#third').fadeOut('slow', function() { 
    $('#forth').fadeIn('slow'); 
    }); 
}); 
$('#back2').click(function (e) { 
    e.preventDefault(); 
    $('#forth').fadeOut('slow', function() { 
    $('#third').fadeIn('slow'); 
    }); 
});