Page load triggers background color shift

Question

Page load triggers background color shift

Here is the structure of my markup:

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

My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the color is white and I want blue to fill in from the top (similar to how the header color fills the body).

I attempted this using the following code:

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

However, it ends up having a fade in effect.

After the color changes, I would like the "form-inputs" to fade in as well. I understand that I need to chain these actions together but I'm having trouble figuring out the exact implementation.

javascript jquery html css

Answer 1

Answer №1

Referenced from jquery animate()

When using the animate() function in jQuery, it's important to note that all animated properties should be animated to a single numeric value. Additionally, most properties that are non-numeric cannot be animated using basic jQuery functionality. For example, properties like width, height, or left can be animated, but background-color cannot be unless the jQuery.Color() plugin is utilized. Property values are considered as a number of pixels by default, unless specified otherwise. Units like em and % can be used where appropriate.

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

See the Working Fiddle Here

The fiddle mentioned above may continuously repeat the slide effect when the cursor goes out of the window and hovers again; to address this, you can implement a solution using javascript or jquery.

If you prefer using jquery, you can refer to koala_dev's comment in this link.

Answer 2

Referenced from jquery animate()

When using the animate() function in jQuery, it's important to note that all animated properties should be animated to a single numeric value. Additionally, most properties that are non-numeric cannot be animated using basic jQuery functionality. For example, properties like width, height, or left can be animated, but background-color cannot be unless the jQuery.Color() plugin is utilized. Property values are considered as a number of pixels by default, unless specified otherwise. Units like em and % can be used where appropriate.

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

See the Working Fiddle Here

The fiddle mentioned above may continuously repeat the slide effect when the cursor goes out of the window and hovers again; to address this, you can implement a solution using javascript or jquery.

If you prefer using jquery, you can refer to koala_dev's comment in this link.

Answer 3

Answer №2

To create a dynamic overlay, try using the slideDown() animation. After the animation is complete, you can fade the form by utilizing 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();
});

Check out the demo on JSFiddle

If you prefer a smoother animation, explore jQuery UI's easing functions. You can incorporate any of these functions as a parameter in slideDown(). Alternatively, you can combine the slide effect with a fade effect for a different visual effect. See an example here.

Answer 4

To create a dynamic overlay, try using the slideDown() animation. After the animation is complete, you can fade the form by utilizing 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();
});

Check out the demo on JSFiddle

If you prefer a smoother animation, explore jQuery UI's easing functions. You can incorporate any of these functions as a parameter in slideDown(). Alternatively, you can combine the slide effect with a fade effect for a different visual effect. See an example here.

Answer 5

Answer №3

Check out this working demo on 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 expandHeight(ids){
var speed = 10;
var element = document.getElementById(ids);
var height = parseInt(element.style.height || element.offsetHeight);
height = (height + 2);
element.style.height = height+'%';
if(height<100)
setTimeout(function(){expandHeight(ids);},speed)
else
{
    $('#form').fadeIn(); //or implement your desired functionality
    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>
expandHeight('backs');
 </script>

Answer 6

Check out this working demo on 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 expandHeight(ids){
var speed = 10;
var element = document.getElementById(ids);
var height = parseInt(element.style.height || element.offsetHeight);
height = (height + 2);
element.style.height = height+'%';
if(height<100)
setTimeout(function(){expandHeight(ids);},speed)
else
{
    $('#form').fadeIn(); //or implement your desired functionality
    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>
expandHeight('backs');
 </script>

Page load triggers background color shift

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble getting a value from a textbox to PHP using jQuery - can anyone lend a hand?

Advantages of choosing between the <NextLink/> and the <Button href="/somePage"/> components in the powerful Mui React UI libraries

What could be the reason for the bottom edge of my central diagonal image having a darker border?

access denied on image links

How come my gifs appear tiny even though I've adjusted their width to 32% each?

Page redirection to a different URL after a successful AJAX call

Can a partially see-through front color be placed on top of an image?

Set up an event listener for when geolocation permission is approved

Reactjs and Isotope offer the ability to expand and collapse on click. In this unique feature, only one item can be expanded at

I'm having difficulty grasping how this CSS is being used

Using Three.js to create a blurred SVG texture from a canvas

How come the h2::after element is positioned directly beneath the main h2 element, and with a margin-bottom?

Setting line height as a pixel value does not yield the desired result

Utilizing jQuery Mobile to tap into smartphone functionalities like camera and calling capabilities

Tips for successfully passing an array containing an object to an AJAX action

Keep JS Accordion open when links are clicked

Using inline styles can cause Content Security Policy (CSP) violations in applications

"Is it possible to conditionally render a component depending on the state in

Customizing PHP output in Ajax and JSON: A step-by-step guide

Making a XMLHttpRequest/ajax request to set the Content-Type header