从右到左淡入淡出

Question

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

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

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

this is what I get:

Answer 1

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/