Question

假设我们在一行中有3张图片。当第二个图像褪色时，第三个将采取他的位置，类比，当第一个将褪色，第二个采取第一个位置，第三个采取第二个位置。但是我希望达到这样的目的。当任何图像褪色时，我想把一个白色的间隙放到位。有可能吗？

$(document).ready(function() {
  $("img").click(function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
  <head>
    <title> title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <meta charset="utf-8" />
  </head>

  <body>
    <img src="https://service.pollstation.uk/img/users/us_1488800972.png" border="1" />
    <img src="http://forum.bladeandsoul.com.pl/download/file.php?avatar=446_1452981972.jpg" border="1" />
    <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" border="1" />
  </body>
</html>

Answer 1

您可以设置opacity的{{1}}属性，以便在点击事件中隐藏或取消隐藏它。

＆＃13;

image

＆＃13;

$(document).ready(function(){
    $("img").click(function(){
        if($(this).css('opacity') === '0')
          $(this).css('opacity', '1');
        else
          $(this).css('opacity', '0');
    });
});

＆＃13;

Answer 2

而不是完全删除它只是淡出它所以它会保留它的位置，但不会像这样显示

$(this).fadeTo("slow", 0);

Answer 3

您可以使用解决方案

$(document).ready(function(){  
  $('img').each(function(i){
    $(this).css({
      left: 210 * i   
    });
  });

  $("img").click(function(){
    var left = $(this).css('left');
    var that = this;
    $(this).fadeOut(500, function(){
      $(that).siblings('img').each(function(i){
        $(this).css({
          left: 210 * i   
        });
      });
      $(that).remove();
    });
  });
});

img { 
  position: absolute;
  width: 200px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://service.pollstation.uk/img/users/us_1488800972.png" border="1"/>
<img src="http://forum.bladeandsoul.com.pl/download/file.php?avatar=446_1452981972.jpg" border="1" style="left: 210px;"/>
<img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" border="1" style="left: 210px;"/>

希望这会对你有所帮助。

在淡化其中一个图像后定位3个图像

3 个答案: