Question

是否可以从左到右淡入div，我的意思是，div的左侧部分首先会淡入并慢慢向右侧。我已经发现了很多像这样的问题但不是正确的问题。

THX

Answer 1

AFAIK，没有内置的传统方式来做到这一点。

然而，我通过同时制作两个动画以一种临时的方式做到了这一点。

我首先创建了一个完全覆盖<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>

它有点硬编码（不是动态的），但它是我用这种简单方法得到的最接近的（我确定有更复杂的方法可以做到这一点）。< / p>

参见工作示例on JSFiddle。

Answer 2

另一个答案将div滑向视线。我做了另一个小提琴，使用2个div并使用透明度和渐变色来进行更多的渐变淡化效果。 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

2 个答案: