时间戳

首页 > 解决方案 > JQuery缓慢的图像变化

javascript - JQuery缓慢的图像变化

问题描述

我有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 的，用户可以看到第二张图片）拜托，可以有人帮助我并告诉我如何使这些图像更改有效？

标签： javascripthtmlcss

解决方案

如果你有容器的宽度，你可以将它设置为隐藏它之外的任何东西。

#container_id{
    overflow:hidden;
}

看起来您使用的work-default-view是您的容器。

推荐阅读