从右到左淡入淡出

Question

我试图从左到右，从右到左淡化，做出类似的事情：

这是我的代码，但这不起作用：

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

这就是我得到的：

Answer 1

问题是你通过减少图像的宽度来获得失真。尝试将图像包装在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");

简单示例：https://jsfiddle.net/12x4cauv/