CODEWITHSUNDEEP
javascripthtmlcss
kores59
kores59

Reputation: 443

JQuery slow image change

I have 2 pictures.

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

In CSS 

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

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

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

and 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});
});

It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image) Please, can somebody help me and tell me how can i make this images change effective?

Upvotes: 0

Views: 340

Answers (3)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Try changing width of img2 instead of left.

$(".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>

Upvotes: 0

LouisTheTeemo
LouisTheTeemo

Reputation: 218

Try this.

$(".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>

Upvotes: 1

akaBase
akaBase

Reputation: 2250

If you have the width of the container you can set it to hide anything outside of it with.

#container_id{
    overflow:hidden;
}

It looks like your using the work-default-view as your container.

Upvotes: 1

Related Questions