从左到右淡入一个div

Question

div是否可以从左向右淡入，我的意思是先div的左边部分淡入，然后慢慢向右淡入。我已经找到了很多这样的问题，但不是正确的问题。

感谢

Answer 1

据我所知，没有内置的常规方法可以做到这一点。

但是，我通过同时制作两个动画的临时方法做到了这一点。

我首先创建了一个完全覆盖 <div> 的白色封面元素。 <div> 初始设置为 opacity: 0。当 <div> 变得不透明时，封面会滑过。

这是动画：

jQuery

$("div#div").animate({
    "opacity": "1"
}, 500);
$("div#cover").animate({
    "left": "+=400px"
}, 500);

CSS

div#div {
    width: 400px;
    height: 400px;
    background-color: green;
    opacity: 0;
}
div#cover {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}

HTML

<div id="div"></div>
<div id="cover"></div>

它有点硬编码（不是动态的），但它是我用如此简单的方法得到的最接近的方法（我相信还有更复杂的方法可以做到这一点）。

查看工作示例 on JSFiddle。

Answer 2

另一个答案将 div 滑动到视线。我制作了另一个 fiddle，使用 2 divs 并使用透明度和渐变颜色来获得更多的渐变淡入淡出效果。 Fiddle here.

<div class="bottom"><div class="top"></div></div>

.bottom {
    height: 100px;
    width: 200px;
    background-color: green;
    opacity: 0;
}
.top {
    height: 100px;
    width: 200px;
    background: linear-gradient(to left, white, transparent);
    opacity: 1;
}

$(".bottom").animate({
    "opacity": "1"
}, 500);
setTimeout(function() {
$(".top").animate({
    "opacity": "0"
}, 500) }, 400 );

从左到右淡入一个div

FadeIn a div from left to right

jquery

fadein