页面加载时背景颜色发生变化
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>
但它有一个衰减效应:(
在颜色变化后,我需要"形式输入"应该淡出。。。我知道我需要连锁操作,但我没有完全得到。
来自jquery animate()
除以下说明外,所有已设置动画的属性都应设置为单个数值;大多数非数字属性不能使用基本的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%;
}
工作Fiddle
上面的fiddle有一个缺点,每当你将光标移出窗口并再次悬停时,它都会重复显示滑动效果。(可以使用javascript/jquery设置)。
如果你想使用jquery,请查看上面koala_dev的评论。
您可以使用slideDown()
动画的动态覆盖,然后在动画完成时使用回调参数淡出窗体:
$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包含在你的项目中),或者你可以将滑动效果与渐变效果相结合,例如这里的
试试这个小提琴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>
相关文章:
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- JS幻灯片与CSS背景颜色变化
- Javascript对象颜色动态变化
- 如何使用Javascript使屏幕颜色随时间变化
- 从表列中检索日期,并根据从今天到日期之间的天数使行的颜色发生变化
- 将鼠标悬停在图像上,图像的不透明度和图像下方标题的颜色会发生变化..同样,当标题变成两行时,它会破坏格式
- 输入时Javascript背景颜色会发生变化
- 如何根据高图中的值获得动态颜色变化
- 颜色变化基于所列问题的编号
- Javascript旋转初始BG颜色变化
- AngularJS:当css类发生变化时,如何通过切换来更改颜色属性
- 图表.js条形图颜色根据值而变化
- 使用CSS和JavaScript点击,链接颜色在被点击和激活时会发生变化,直到我点击其他链接
- 动画颜色变化的优雅方式
- 页面加载时背景颜色发生变化
- 悬停时列表项的背景颜色逐渐变化
- 主页链接'的背景颜色在Internet explorer中发生了变化,但在Mozilla Firefox中不起作
- 鼠标单击时表格颜色发生变化
- 如何生成产品的颜色变化
- 当序列计数变化时,使用NVD3维护堆叠/分组多条形图的颜色映射