Develop Reference

Animating delay on bootstrap container classes

I am using bootstrap framework on my website, with the content wrapped in class="container"
This has certain break-points when the screen resizes, the cols, margins, etc change.
I wanted to put a delay on that break point but not sure how to go about it. So when the side margins change from one size to another, the content doesn't just jump to the new size, but animates into it.

Here you have an example of the CSS that you can use:
-webkit-transition:width 1000ms ease-in-out;
-moz-transition:width 1000ms ease-in-out;
-o-transition:width 1000ms ease-in-out;
transition:width 1000ms ease-in-out;
Basically what it does, is that when the property "width" changes specifies a transition effect with a slow start and end of 1 second.
JSFiddle with an example. You have to move your mouse hover the red DIV to see the effect.
More information about this CSS property.

Try adding something similar to the following CSS to your container element:
transition: all 0.5s ease-in-out;

How to animate div on changing margin using js

div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.

Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Slow jQuery animation - Changing width

I have two divs. One is currently 0% and the other 100%. With the click function, I transform them into 12% and 88%.
Works like charm, but I would like the "process" to be slow, and not instant. Like a small animation.
This is the code I have:
<script>
$(document).ready(function(){
$(".menu_logo").click(function(){
$(".right").css("width","88%");
$(".left").css("width","12%");
$(".menu_logo").css("display","none");
});
});
</script>

Use CSS transitions. Add the following properties to your .right and .left classes.
CSS
-webkit-transition: width 150ms linear;
o-transition: width 150ms linear;
transition: width 150ms linear;

To do this with jquery, you can use the following snip:
$("button").click(function() {$("div").animate({width:'350px'}, "slow")});
JSFiddle

resizing animation on wikipedia

If you go to a Wikipedia page in Chrome and ctrl+scrollup or ctrl+scrolldown the resize is done in an animation.
How is this achieved?
(In FF only the
Read
View source
View history
links in the top right corner animate)

If you examine the CSS with Chrome's Inspector, you will find this rule:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This smoothly animates the margin-left and padding properties, which Webkit seem to modify when zooming in and out. Firefox should also animate, but it doesn't.

Wikipedia does not animate in most browsers, but there is animation attempting to go on. The first clue was the vector-animate class on the body of each page. Their load.js file (called at the bottom of each page) attempts to create an animated switch when users zoom in and out, but this is not supported in most browsers (only a lucky few). It does not work in most FF and IE versions.
The load JS file is found here://bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*
In addition, they also use some CSS to try to animate this:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This would get the same effect for Webkit browsers. A Reference about this is found here. As you will note, this transitions CSS3 property is not very well supported yet.
For more information on the support of this property, check here.

ToggleClass animate jQuery?

I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?

jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO

.toggleClass() will not animate, you should go for slideToggle() or .animate() method.

You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}

I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.

You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});

Should have checked, Once I included the jQuery UI Library it worked fine and was animating...