这是我的标记结构:
<div class="authentication">
<div class="form-inputs"></div>
</div>
我想在页面加载时从顶部向下滑动身份验证的颜色。 颜色最初为白色,蓝色应从顶部向下滑动。 (就像标题颜色填充身体一样)。
我试过了:
<script>
jQuery(document).ready(function($) {
$('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
});
</script>
但它有效淡出:(
颜色变化后,我需要“表格输入”应该淡入...我知道我需要链接动作,但我不完全得到它。
答案 0 :(得分:2)
除非如下所述,否则所有动画属性都应设置为单个数值。大多数非数字属性无法使用基本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's comment。
答案 1 :(得分:1)
您可以使用带有slideDown()
动画的动态叠加层,然后在动画使用回调参数完成时淡化表单:
$blue = $('<div>').css({
background: 'blue',
position: 'absolute',
width: '100%',
height: '100%',
top: '0',
display: 'none'
}).appendTo('.authentication').slideDown('slow', function(){
$('.form-inputs').fadeIn();
});
<强> Demo fiddle 强>
如果你想要一个“更流畅”的动画然后查看jQuery UI的easing functions,你可以使用它们中的任何一个作为slideDown()
中的参数(当然,你需要在你的项目中包含jQuery UI) )或者您可以将幻灯片效果与淡入淡出效果结合起来,例如here
答案 2 :(得分:0)
试试这个woking小提琴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>