Prakash Prakash - 2 months ago 7
CSS Question

fade in and out from right to left

I am trying to fadeIn from left to right and right to left to make something like this:

enter image description here

this is my code, but this doesn't work:

$(lastSlide).animate({ width: 'toggle', height:'340', opacity: 'toggle' }, "slow");


this is what I get:

enter image description here

Answer

The problem is that you get the distortion by reducing the width of the image. Try to wrap the image in the div:

<div id="main">
  <div id="img1">
    <img src="..."/>
  </div>
  <div id="img2">
    <img src="..."/>
  </div>
 </div>

 $("#img2").animate({ width: 'toggle', height:'340', opacity: 'toggle' }, "slow");

Simple example: https://jsfiddle.net/12x4cauv/