页面加载时背景颜色发生变化

问题描述：

这是我的标记结构:

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

我希望页面加载时，身份验证的颜色从上到下滑落. 颜色最初是白色，蓝色应该从顶部向下滑动. (就像标题颜色填充了正文一样).

I wanted that on page load the color of authentication slides down from top-bottom. The color is initially white and blue should slide down from the top. (like the header color fills the body).

我尝试过:

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

但是它具有褪色效果:(

But it has a fade in effect :(

颜色更改后，我需要"form-inputs"(淡入)...我知道我需要链接操作，但我不能完全得到它.

After the color change i need the "form-inputs" should fade in ... i know i need to chain the actions but im not exactly getting it.

答

您可以在 slideDown() 动画，然后在动画使用回调参数完成时淡出表单:

You can use a dynamic overlay with a slideDown() animation and then fade the form when the animation completes using the callback argument:

$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的放松功能，则可以使用将它们中的任何一个作为slideDown()中的参数(当然，您需要在项目中包括jQuery UI)，也可以将滑动效果与淡入淡出效果结合使用，例如

If you want a "smoother" animation then look into jQuery UI's easing functions, you can use any of them as a parameter in slideDown() (of course for that you need include jQuery UI to your project) or you can combine the slide effect with a fade effect, example here

页面加载时背景颜色发生变化

相关推荐