1

这是我的标记结构：

<div class="authentication">
  <div class="form-inputs"></div>
</div>

我希望在页面上加载身份验证的颜色从顶部向下滑动。颜色最初为白色，蓝色应从顶部向下滑动。（就像标题颜色填充正文一样）。

我试过这个：

<script>
  jQuery(document).ready(function($) {
    $('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
  });
</script>

但它有一个淡入淡出的效果:(

颜色改变后，我需要“表单输入”应该淡入...我知道我需要链接动作，但我不完全明白。

4

3 回答 3

2

来自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%;
}

工作小提琴

上面的小提琴有一个缺点，即每当您将光标移出窗口并再次悬停时，它都会重复显示幻灯片效果。（您可以使用 javascript/jquery 设置）。

如果您想使用 jquery，请查看上面的 koala_dev 评论。

于 2013-09-04T06:26:04.950 回答
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();
});

演示小提琴

如果你想要一个“更平滑”的动画然后查看 jQuery UI 的缓动函数，你可以使用它们中的任何一个作为参数slideDown()（当然你需要在你的项目中包含 jQuery UI）或者你可以将幻灯片效果与淡入淡出结合起来效果，这里举例

于 2013-09-04T07:35:30.137 回答
0

试试这个 woking fiddle 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>
于 2013-09-04T06:54:44.470 回答