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） - 隐藏带有ids #second和#forth的div我只是添加为css

#second, #forth {
    display:none;
}

工作就像我认为的那样2）我已经按照以下方式调整了代码：

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

替换图像onclick

1 个答案: