Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

Question

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

I successfully animated a side navigation menu to slide in from the left of the screen. The animation is working perfectly, however, I had to set the div's width to 0px in order for it to appear as though it's sliding in from off-screen.

If I change the div's width to 200px, it displays on screen at 200px wide before widening to 400px after the animation completes.

How can I keep the div at a fixed width of 200px both during and after the animation?

For a demonstration, please refer to this jfiddle example: http://jsfiddle.net/kYRbJ/1/

Thank you

jquery html css jquery-animate

Answer 1

Answer №1

Here is a suggestion to try:

nav#cmNav{
position:fixed;top:0;left:0;
left:-200px;
height:100%;
width : 200px;
background-color:#323233;

-moz-box-shadow:    inset  0 0  #000000;
-webkit-box-shadow: inset  0  #000000;
box-shadow:         inset  -10px 0 10px -5px  #000000;

}

$(document).ready(function(){

    $("#cmNav").animate({left: 0}, 1000);


});

Answer 2

Here is a suggestion to try:

nav#cmNav{
position:fixed;top:0;left:0;
left:-200px;
height:100%;
width : 200px;
background-color:#323233;

-moz-box-shadow:    inset  0 0  #000000;
-webkit-box-shadow: inset  0  #000000;
box-shadow:         inset  -10px 0 10px -5px  #000000;

}

$(document).ready(function(){

    $("#cmNav").animate({left: 0}, 1000);


});

Answer 3

Answer №2

Here's a quick solution:

VIEW DEMO

$(document).ready(function(){
    $("#cmNav").find('*').css('width','200px').end().animate({width: 200}, 1000);
});

Answer 4

Here's a quick solution:

VIEW DEMO

$(document).ready(function(){
    $("#cmNav").find('*').css('width','200px').end().animate({width: 200}, 1000);
});

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

Answer №1

Answer №2

Similar questions

Generate a separate div in an HTML file for each item listed in a JSON document

Accessing the selected value from a drop-down list in a Window.Open using the MVC model

The onClick event in ReactJs appears to be ineffective when used with a button HTML element

How to use Laravel to upload images using Ajax

Choosing a CSS selector for a class that does not have a specific ID

The utilization of the jquery.form.js plugin is resulting in my form being submitted twice

Mouseover function ceases to function once an element is dropped

The trio of Angular, jQuery, and Chrome extensions is a powerful

Extract ID for Bootstrap modal display

"Emphasizing the Html.ActionLink menu for improved user navigation and

Display a modal using jQuery, PHP, and Ajax to verify if a user is

Formulate a multi-line string using a collection in React's JavaScript framework

Leveraging AJAX requests for database connectivity in CodeIgniter

Tips for extracting text content that is not within an HTML element

Is there a way to eliminate the shadow effect on a specific part of a material-ui AppBar?

Guidelines for retrieving a class name using jQuery when hovering over a div

Images for the background of the table header and sorting icons

Is it possible to dynamically set the maximumSelectionLength in a select2 dropdown?

selectors that seem to be floating

How can we stop the navigation submenus (ULs) from appearing as if they are floating?