从右到左淡入淡出

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:

这就是我得到的：

1 个解决方案

#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中：

<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/

简单的例子：https：//jsfiddle.net/12x4cauv/

#1