Background color change on page load
Question
This is my markup structure:
<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).
I tried this :
<script>
jQuery(document).ready(function($) {
$('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
});
</script>
But it has a fade in effect :(
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.
3 answers
solution1
2 2013-09-04 06:26:04
From jquery animate()
All animated properties should be animated to a single numeric value , except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example,
width,height, orleftcan be animated butbackground-colorcannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The unitsemand%can be specified where applicable.
Updated ( Using 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%;
}
The above fiddle has a drawback that it will repeat showing the slide effect whenever you move your cursor out of the window and hover again. ( which you can set using javascript/jquery ).
If you want to go with jquery then check koala_dev's comment above.
solution2
1 ACCPTED 2013-09-04 07:35:30
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();
});
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
solution3
0 2013-09-04 06:54:44
Try this 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.