Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}



.wrapper:hover .contents .inner {
   
    width:100%;
}

<div class="wrapper">
    <span class="label">+</span>
    <div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

Animating to 100% causes it to wrap because the box is bigger than the available width (100% minus the + and the whitespace following it).

Instead, you can animate an inner element, whose 100% is the total width of .contents.

chovyAnswered 11 months ago · Answer 2

http://jsfiddle.net/tVHYg/5/

.wrapper {
    background:#DDD;
    padding:1%;
    display:inline;
    height:20px;
}


span {
    width: 1%;
}

.contents {
    background:#c3c;
    overflow:hidden;
    white-space:nowrap;
    display:inline-block;
    width:0%;
}



.wrapper:hover .contents {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

    width:90%;
}

Chris MiddletonAnswered 11 months ago · Answer 3

Got it to work by transitioning the padding as well as the width.

JSFiddle: http://jsfiddle.net/tuybk748/1/

<div class='label gray'>+
</div><!-- must be connected to prevent gap --><div class='contents-wrapper'>
    <div class="gray contents">These are the contents of this div</div>
</div>

.gray {
    background: #ddd;
}
.contents-wrapper, .label, .contents {
    display: inline-block;
}
.label, .contents {
    overflow: hidden; /* must be on both divs to prevent dropdown behavior */
    height: 20px;
}
.label {
    padding: 10px 10px 15px;
}
.contents {
    padding: 10px 0px 15px; /* no left-right padding at beginning */
    white-space: nowrap; /* keeps text all on same line */
    width: 0%;
    -webkit-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    -moz-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    -o-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
    transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
        padding-right 1s ease-in-out;
}
.label:hover + .contents-wrapper .contents {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

ProgrammerAnswered 11 months ago · Answer 4

Install with npm:

$ npm install animate.css --save

Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):

$ yarn add animate.css

Import it into your file:

import 'animate.css';

Or add it directly to your webpage using a CDN:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

ProgrammerAnswered 11 months ago · Answer 5

To animate any element, such as a simple image:

1
					
						2
					
						3
					
						4
					
						5
					
				
				
				
					<div id="clickme">  Click here</div><img id="book" src="book.png" alt="" width="100" height="123"  style="position: relative; left: 10px;">

1 2 3 4 5

<div id="clickme">  Click here</div><img id="book" src="book.png" alt="" width="100" height="123"  style="position: relative; left: 10px;">

To animate the opacity, left offset, and height of the image simultaneously:

1
					
						2
					
						3
					
						4
					
						5
					
						6
					
						7
					
						8
					
						9
					
				
				
				
					$( "#clickme" ).click(function() {  $( "#book" ).animate({    opacity: 0.25,    left: "+=50",    height: "toggle"  }, 5000, function() {    // Animation complete.  });});

1 2 3 4 5 6 7 8 9

$( "#clickme" ).click(function() {  $( "#book" ).animate({    opacity: 0.25,    left: "+=50",    height: "toggle"  }, 5000, function() {    // Animation complete.  });});

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

1
					
						2
					
						3
					
						4
					
						5
					
						6
					
						7
					
						8
					
						9
					
				
				
				
					$( "li" ).animate({  opacity: .5,  height: "50%"}, {  step: function( now, fx ) {    var data = fx.elem.id + " " + fx.prop + ": " + now;    $( "body" ).append( "<div>" + data + "</div>" );  }});

ProgrammerAnswered 11 months ago · Answer 6

"Animate" an element, by changing its height:

$("button").click(function(){
  $("#box").animate({height: "300px"});
});

Syntax

(selector).animate({styles},speed,easing,callback)

Alternate Syntax

(selector).animate({styles},{options})

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

Write an answer

Recent Questions on jquery

Programming Languages

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

Write an answer

Questions related to 'Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery'

Recent Questions on jquery

Programming Languages