Question

我正在创建一系列过渡/动画，因此我需要有一个javascript解决方案，而不是css关键帧解决方案。

我正在使用许多不同序列的延迟，我正在尝试使用新的背景颜色，但由于某些原因使用addClass功能对我不起作用。

为什么这对我不起作用？

＆＃13;

//$(".blue").delay(2500).addClass("green-fill");
$(".green-fill").delay(2500).addClass("green-fill");

＆＃13;

.blue {
	background-color: #0085A1;
	width: 100%;
	height: 100vh;
	position: relative;
	text-align: center;
}
.green-fill {
	display: none;
	background: green;
	width: 100%;
	height: 100vh;
	position: relative;
	text-align: center;
	z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
   <div class="green-fill">
   Hello
	</div>
</div>

＆＃13;

Answer 1

CSS

.green-fill {
    background: green;
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    z-index: 1;

    transition:background-color 1s;
}
.green-fill.blue{
    background-color:#00f;
}

的jQuery

setTimeout(function(){
    $(".green-fill").addClass("blue");
},2500);

// That's why css keyframes are better...
// For smooth ease back : the trick is to copy the color being rendered, then remove class, and then finally remove the inline generated code.

setTimeout(function(){
    var $gb = $(".green-fill");
    var color = $gb.css("background-color");
    $gb.css("background-color",color).removeClass("blue").css("background-color","");

  },5000);

Answer 2

您正在尝试添加课程＆＃34; green-fill＆＃34;到完全相同的班级＆＃34;绿色填充＆＃34;。因此，该课程是imediatly应用于div。将类改为其他类或给它一个id（就像我在下面的例子中所做的那样）。

使用Javascript：

//$(".blue").delay(2500).addClass("green-fill");
$("#fill-it").delay(2500).addClass("green-fill");

标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
   <div id="fill-it">
   Hello
    </div>
</div>

CSS可以保持不变。

如何使用延迟效果转换不同的背景颜色

2 个答案: