1

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.

Vignesh Pichamani
  • 7,950
  • 22
  • 77
  • 115
SkyKOG
  • 287
  • 1
  • 7
  • 25

3 Answers3

2

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, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % 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%;
}

Working Fiddle

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.

Community
  • 1
  • 1
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • This appears as a really elegant effect ... i really love this ... i tried combining with koala's js implementation ... but i have two issues ... the form dosent fade in and still the effect is fade-in and not dropdown ... – SkyKOG Sep 04 '13 at 07:11
1

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

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

omma2289
  • 54,161
  • 8
  • 64
  • 68
  • Thanks for a pleasant explanation and an elegant solution :) ... could you tell me how i can add slight delay to the form appearance ? ... – SkyKOG Sep 04 '13 at 08:04
  • 1
    @SkyKOG for a delay you can use `$('.form-inputs').delay(2000).fadeIn();` or if you just want to control the fadeIn duration you can add a parameter like `fadeIn(2000)` – omma2289 Sep 04 '13 at 15:55
0

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>
Voonic
  • 4,667
  • 3
  • 27
  • 58