页面加载时背景颜色发生变化
[英]Background color change on page load
问题描述
这是我的标记结构：
<div class="authentication">
<div class="form-inputs"></div>
</div>
我希望页面加载时身份验证的颜色从上到下滑落。 颜色最初是白色，蓝色应该从顶部向下滑动。 （就像标题颜色填充了正文一样）。
我尝试了这个：
<script>
jQuery(document).ready(function($) {
$('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
});
</script>
但是它有淡入淡出的效果:(
颜色更改后，我需要“ form-inputs”应该淡入...我知道我需要链接操作，但我不能完全得到它。
3 个解决方案
解决方案1
2 2013-09-04 06:26:04
除非另有说明，否则所有动画属性均应设置为单个数值 。 大多数非数字属性不能使用基本的jQuery功能进行动画处理（例如，可以对
width，height或left进行动画处理，而不能对background-color进行动画处理，除非使用jQuery.Color（）插件）。 除非另有说明，否则属性值被视为像素数。 可以在适当的地方指定单位em和%。
更新 （ 使用css ）
.authentication {
width: 100%;
}
body:hover .authentication{
height: 100%;
background-color: #4BC5DA;
-webkit-transition: background-color 3s ease, height 3s ease;
-moz-transition: background-color 3s ease, height 3s ease;
-o-transition: background-color 3s ease, height 3s ease;
-ms-transition: background-color 3s ease, height 3s ease;
transition: background-color 3s ease, height 3s ease;
}
body, html {
width: 100%;
height: 100%;
}
上面的小提琴有一个缺点，每当您将光标移出窗口并再次悬停时，它都会重复显示幻灯片效果。 （ 您可以使用javascript / jquery进行设置 ）。
如果您想使用jquery，请检查上面的koala_dev的注释 。
解决方案2
1 已采纳 2013-09-04 07:35:30
您可以将动态叠加层与slideDown()动画一起使用，然后在动画完成时使用callback参数淡入窗体：
$blue = $('<div>').css({
background: 'blue',
position: 'absolute',
width: '100%',
height: '100%',
top: '0',
display: 'none'
}).appendTo('.authentication').slideDown('slow', function(){
$('.form-inputs').fadeIn();
});
如果要“平滑”动画，然后查看jQuery UI的缓动函数 ，则可以将它们中的任何一个用作slideDown()的参数（当然，您需要在项目中包括jQuery UI），或者可以组合滑动效果有淡入淡出效果，例如这里
解决方案3
0 2013-09-04 06:54:44
试试这个醒来的小提琴http://jsfiddle.net/Z3Ts7/5/
<style>
.authentication{position:absolute;width:400px;height:300px;border:1px #c0c0c0 solid;overflow:hidden;}
.back{position:absolute;z-index:0;height:0%;width:100%;background-color:#53a2fa;}
#form{position:absolute;z-index:1;width:100%;height:100%;display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function down(ids){
var speed = 10;
var ele = document.getElementById(ids);
var height = parseInt(ele.style.height || ele.offsetHeight);
height = (height + 2);
ele.style.height = height+'%';
if(height<100)
setTimeout(function(){down(ids);},speed)
else
{
$('#form').fadeIn(); //or do whatever you want
return;
}
}
</script>
<body>
<div class="authentication">
<div class="back" id="backs"></div>
<div class="form-inputs" id="form">
<input type="text">
<input type="submit">
</div>
</div>
</body>
<script>
down('backs');
</script>
更改鼠标移动和页面加载时的背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.