Develop Reference

Reducing fixed header on scroll from top of page

I have a website with a fixed header, on the home page the header contains additional content when you are at the top of the page, but I want to hide this content and have a reduced header as they scroll down the page.
So on the initial scroll i want to hide the additional header content and animate the margin of the content below but keep it so that the top of the content still shows underneath it and then scroll from normal from there.
The snippet below should show what I mean better:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
$('#page_content').css('margin-top', (main_head_height)+'px');
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

You need to change in your JS code. Margin you are reducing when the page start scrolling need to adjust by padding. So you can try this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
// $('#page_content').css('margin-top', (main_head_height)+'px');
$('#page_content').css(
{'margin-top': (main_head_height)+'px', 'padding-top': (main_head_height)+'px'}
);
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

You can do it like this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#extra_header_content').outerHeight(true);
$(document).on("scroll", function() {
const scrollTop = $(document).scrollTop();
if (scrollTop >= head_height) {
$("#extra_header_content").css('height', 0);
$('#page_content').css('margin-top', main_head_height);
$('#header').removeClass('home');
} else if (scrollTop > 0) {
$("#extra_header_content").css('height', extra_head_height - scrollTop);
$('#page_content').css('margin-top', head_height);
$('#header').removeClass('home');
} else {
$("#extra_header_content").css('height', extra_head_height);
$('#page_content').css('margin-top', head_height);
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:100px;width:100%;}
#extra_header_content{height:100px;width:100%; overflow: hidden;}
#page_content{background-color:#33d;height:500px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

I can offer you a different approach without JavaScript
body,html{
padding:0;
margin:0;
}
#main-header{
position:fixed;
top:0;
left:0;
right:0;
height: 50px;
background: green;
z-index:3;
}
#extra-header{
position:fixed;
top:50px;
left:0;
right:0;
height: 50px;
background: lime;
z-index: 0;
}
#content{
margin-top:100px;
height:2000px;
position:relative;
z-index:1;
background:blue;
}
#content>div{
height:200px;
background: #efefef;
}
#content>div:nth-of-type(2n){
background: red;
}
<div id="main-header">
Main
</div>
<div id="extra-header">
Extra
</div>
<div id="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

This could be a solution if you will use position sticky and not fixed, but this a bit jerky, So I will post one more solution here with smooth animation
var head_height = $('#header').outerHeight(true);
//$('#page_content').css('padding-top', (head_height)+'px');
if ($('#extra_header_content').length != 0) {
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function() {
if ($(document).scrollTop() >= main_head_height) {
$('#page_content').css('padding-top', (main_head_height) + 'px');
$("#extra_header_content").slideUp("slow");
//$('.page_content_wrapper').addClass('scrolled');
//$('.page_content_wrapper').css('top', (main_head_height)+'px');
$('#header').removeClass('home');
} else {
$("#extra_header_content").slideDown("slow");
$('#page_content').css('padding-top', 0);
//$('.page_content_wrapper').css('top', 0);
//$('#header').addClass('home');
}
});
} else {
$('#header').removeClass('home');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
padding: 0px;
margin: 0px;
}
#header {
background-color: #d33;
position: sticky;
top: 0px;
width: 100%;
z-index: 9;
}
.home {
background-color: #3d3 !important;
}
#main_header_content {
height: 50px;
width: 100%;
}
#extra_header_content {
height: 50px;
width: 100%;
}
#page_content {
background-color: #33d;
height: 5000px;
width: 100%;
}
.page_content_wrapper {
position: relative;
top: 0px;
}
#page_content .page_content_wrapper {
transition: top 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">
<div class="page_content_wrapper">This should still be visible when header initially reduces</div>
</div>
<span class="hamBurger"></span>

How to return next() and prev() in a parameter?

I am creating a simple slider that has 2 buttons with almost the same code. The only difference would be next() and prev(). So I use a parameter (direction) for this.
In this case I get the error:
Uncaught TypeError: Cannot read property 'length' of undefined
Why?
$(document).ready(function() {
// Navi
function navi(direction) {
if ($('.slider').find('.active').direction.length != 0) {
$('.slider')
.find('.active')
.removeClass('active')
.direction
.addClass('active');
}
}
$('.next').on('click', function() {
navi('next()');
});
$('.back').on('click', function() {
navi('prev()');
});
https://jsfiddle.net/n339tzff/3/

Pass the string without parenthesis, use bracket notation
$('.next').on('click', function() {
navi('next');
});
if ($('.slider').find('.active')[direction]().length != 0)

I came up with a solution like this;
$(document).ready(function() {
$('.next').click(function(){
var x = $('.active'); //grab active class because we will delete it soon
$('.active').removeClass('active'); //now remove active class
if($(x).next('img').length < 1){ //check if it is the last img element
$('img').eq(0).addClass('active'); //if yes return to first img
} else {
$(x).next('img').addClass('active'); //else go on.
}
});
$('.back').click(function(){
var x = $('.active');
$('.active').removeClass('active');
if($(x).prev('img').length < 1){
$('img').eq(4).addClass('active');
} else {
$(x).prev('img').addClass('active');
}
});
});
In this script You are able to slide next img or prev image with nav buttons and your loop will be infinite.
here is a DEMO:
$(document).ready(function() {
$('.next').click(function(){
var x = $('.active');
$('.active').removeClass('active');
if($(x).next('img').length < 1){
$('img').eq(0).addClass('active');
} else {
$(x).next('img').addClass('active');
}
});
$('.back').click(function(){
var x = $('.active');
$('.active').removeClass('active');
if($(x).prev('img').length < 1){
$('img').eq(4).addClass('active');
} else {
$(x).prev('img').addClass('active');
}
});
});
.slider {
overflow: hidden;
width: 100%;
height: 400px;
}
.slider img {
float: left;
display: none;
}
.active {
display: block !important;
}
.next, .back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>

You can't pass a string into a function and expect it to act as executable code (unless you resort to new Function() or eval(), neither of which you should do). But, you can write a simple if/them that executes the right command based on string input:
$(document).ready(function() {
// Navi
function navi(direction) {
// You need this no matter what the direction is:
var $active = $('.slider').find('.active');
if(direction === "next" && $active.next().length === 1) {
$active.removeClass('active');
$active.next().addClass('active');;
} else if(direction == "prev" && $active.prev().length === 1) {
$active.removeClass('active');
$active.removeClass(".active").prev().addClass('active');
}
}
$('.next').on('click', function() { navi('next'); });
$('.back').on('click', function() { navi('prev'); });
});
.slider {
overflow: hidden;
width: 100%;
height: 400px;
}
.slider img {
float: left;
display: none;
}
.active {
display: block !important;
}
.next, .back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

How can I use easing effects to this div that expands onclick, as well as fade in effects on the elements inside it?

I have two problems,
1) I have a div that expands onclick, (.panel) how can I use easing on it so it opens in a smooth way?
2) how can I make the ul list within the expanding div (.panel) fade in a few mili seconds after the div has expanded?
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
}
.panel ul {
margin-left:10%;
color:white;
}
.mores {
width: 210px;
height: 170px;
overflow: hidden;
}
here is the fiddle JSFiddle
Many Thanks

I tried something, tell me if that's what you expected. http://jsfiddle.net/z2p0r5s9/11/
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul style="display:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
CSS
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
transition: all 2s ease;
}
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
setTimeout(function(){
$('ul').fadeIn();
},2000);
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});

is this what you pretend?
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200, function(){
setTimeout(function() {
$(".options").fadeIn()
}, 75);
});
});
});
http://jsfiddle.net/lycrest15/z2p0r5s9/2/
It is using default easing but you can change it to the proper way you want. Just see documentation here: http://api.jquery.com/animate/

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks

See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​

The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});