Question

我有2张照片。

 <div class="work-default-row">
     <img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
     <img class="img2"  src="/files/ourWork/titleImages/img2.jpg"/>
 </div>

在 CSS

中

.work-default-row { 
     position:relative;
 }

.img1 {
     width:100%;
     height:400px;
 }

.img2 {
     position:absolute;
     top:0px;
     left:3000px;
     width:100%;
     height:400px;
 }

和 JavaScript

$(".work-default-row").hover(function(){
    $(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
    $(".img2", this).stop().animate({left:"3000px"}, 
  {queue:false,duration:200});
});

它“起作用”，悬停时，第二个图像刚刚从无处传来，并覆盖了第一个图像。但是这个解决方案是可怕的。（img1的位置在页面的中间，所以我可以看到img2是如何从整个页面传来的，并且分辨率大于3000px，用户可以看到第二张图像）请，有人可以帮助我，并告诉我如何使这些图像更改有效吗？

Answer 1

如果您具有容器的宽度，则可以将其设置为使用它隐藏任何外部内容。

#container_id{
    overflow:hidden;
}

似乎您使用work-default-view作为容器。

Answer 2

尝试一下。

$(".slider").hover(
  function() {
    $(".slider-inner", this)
      .stop()
      .animate({ left: "0" }, { queue: false, duration: 200 });
  },
  function() {
    $(".slider-inner", this)
      .stop()
      .animate({ left: "-100vw" }, { queue: false, duration: 200 });
  }
);

.slider{
  overflow: hidden;
}
.slider-inner {
  width: 200vw;
  position: relative;
  display: flex;
  flex-direction: row;
  overflow:hidden;
}
img{
  width: 100vw;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-inner">
    <img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
    <img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
  </div>
</div>

Answer 3

尝试更改img2的宽度，而不是向左更改。

$(".work-default-row").hover(function() {
  $(".img2", this).stop().animate({
    width: "100%"
  }, {
    queue: false,
    duration: 200
  });
}, function() {
  $(".img2", this).stop().animate({
    width: "0"
  }, {
    queue: false,
    duration: 200
  });
});

.work-default-row {
  position: relative;
}

.img1 {
  width: 100%;
  height: 400px;
}

.img2 {
  position: absolute;
  top: 0px;
  width: 0;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
  <img class="img1" src="https://picsum.photos/200" />
  <img class="img2" src="https://picsum.photos/200" />
</div>

jQuery的图像缓慢变化

3 个答案: