http://invisiblewebdesign.co.uk/temp/dreamteam/
Hi there..the link above has some sliding divs for the content. Basically what i idealy want is that when you click on the thinner div (and only the thinner one) that it expands and shrinks the other one. I have made an attempt at doing this but i dont think i am doing it a very clever way.
Can someone please advise a more sensible solution and hopefully more elegant.
Thanks
Chris
JS:
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.toggle').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
if($('.right').is('.sidebar'))
{
$('.left').animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$('.right').animate(
{
width: 820
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
}
if($('.left').is('.sidebar'))
{
$('.left').animate(
{
width: 820,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$('.right').animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
}
});
});
Simplified script:
HTML:
<div class="content">
<div class="left">
<div class="header">
<h2>Users</h2>
</div>
<div class="content">
</div>
</div>
<div class="right">
<div class="header">
<h2>Placements</h2>
</div>
<div class="content">
</div>
</div>
</div>
CSS:
.left { float: left; }
.right { float: left; margin-left: 10px; }
.header { height: 40px; cursor: pointer;}
.content { height: 200px; }
.left { width: 820px; }
.right { width: 120px; }
.content h2 {
color: white;
font-size: 1em;
font-weight: bold;
float: right;
padding: 10px;
}
.left .header { background-color: red; }
.left .content { background-color: pink; }
.right .header { background-color: green; }
.right .content { background-color: orange; }
jQuery:
$('.content .left').click(function() {
myAnim('.right', '.left');
});
$('.content .right').click(function() {
myAnim('.left', '.right');
});
function myAnim(small, big) {
$(small).animate({
width: 125,
}, {
duration: 700,
});
$(big).animate({
width: 820
}, {
duration: 700,
});
}
jsFiddle here
This should work smoother and be more easy to maintain:
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.toggle').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
$(this).parent().animate(
{
width: 820,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
$(this).parent().siblings().animate(
{
width: 125,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});
});
});
as you can see, instead of acting on a specific class, we will expand the current clicked header, and shrink the rest of his siblings (in case you will have more than one in the future, but even for 2 it is the best approach)
I haven't tested it, but I've attempted to cut your code in half, should make it easier to maintain.
$(document).ready(function () {
$('.right').addClass('sidebar');
$('.right').addClass('sidebarable');
$('.left').addClass('sidebarable');
var hideDistance = 125;
var showDistance = 820;
//this is so you click the hidden sidebar to show it,
//rather than clicking the one that is already visible
//and having it do that weird show//hide thing.
$('.toggle').parent(':not(.sidebar)').click(
function()
{
$('.left').toggleClass('sidebar');
$('.right').toggleClass('sidebar');
$('.sidebarable:not(.sidebar)').animate(
{
width: hideDistance,
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});//hidden siderbar
$('.sidebar').animate(
{
width: showDistance
},
{
duration: 700,
specialEasing:
{
width: 'easeInOutQuint',
}
});//active siderbar
});//click toggle function
});//ready
Related
Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});
Whenever I click on "click hier" the div with class "cirkel1" and the div with class "bewegendetekst" show up. But when I want to click "click back" they won't disappear.
I tried to use the toggle function but that only made things worse.
So my question is how do I make the div with class "cirkel1" and the div with class "bewegendetekst" disappear when I click on "click back"
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
});
$(document).ready(function() {
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
});
$(document).ready(function() {
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
});
$(document).ready(function() {
$(".witte-tekst").click(function() {
$(".cirkel1").show("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
Use jQuery toggle() method to show/hide circle when you click Click Back button :
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
})
NOTE : One ready function is enough.
Hope this helps.
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
hide() function is use to hide like
$('#yourdiv').hide();
Its will hide back again to click
$(".witte-tekst").click(function() {
$(".cirkel1").toggle( "slow" );
});
The variable "abtBack" contains an if statement that when ran after the xBttn click function should allow the word "About" on the screen move back to its original position. For some reason when I try to run the variables nothig different happens from when I didn't try to run them. I left out what parts of the code I feel are not important to solve this problem. Please refer to my full code in the Fiddle below.
JSFiddle
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
</div>
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
}
}
var main = function() {
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
})
})
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
}
The variable abtLeft is local to the main function, so it can't be accessed in the abtBack function. Either move the declaration of this variable outside both functions, or put the defintion of abtBack inside main.
Another problem is that this is not set to the element you want to animate in the abtBack and prtBack functions, so $(this).animate() won't work. Use $('#prt').animate() and $('#abt').animate().
var main = function() {
var prtBack = function() {
if ($('#prt').offset().left == (prtLeft - 430)) {
$('#prt').animate({
left: "+=430"
}, 450);
} else {
$('#prt').animate({
left: "-=430"
}, 450);
}
}
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$('#abt').animate({
left: "+=210"
}, 450);
}
}
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
prtBack();
})
})
//When Home tab is clicked
$('#hme').click(function() {
if ($('#abt, #prt').css('opacity') == 0) {
$('#abt, #prt').animate({
opacity: 1
}, 300);
} else {
$('#abt, #prt').animate({
opacity: 0
}, 300);
}
});
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
} else {
$(this).animate({
left: "-=210"
}, 450);
}
});
var prtLeft = $('#prt').offset().left;
//When About tab is clicked
$('#prt').click(function() {
if ($('#hme, #abt').css('opacity') == 0) {
$('#hme, #abt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #abt').animate({
opacity: 0
}, 300);
}
if ($('#prt').offset().left == (prtLeft - 430)) {
$(this).animate({
left: "+=430"
}, 450);
} else {
$(this).animate({
left: "-=430"
}, 450);
}
});
}
$(document).ready(main);
body {
background: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
.mvLeft {
right: 215px;
}
#bckDrp {
left: 50%;
transform: translate(-50%, 0);
position: fixed;
width: 85%;
height: 100%;
background: url('http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#nav {
background: rgba(0, 0, 0, 0.20);
}
.padExt {
width: 100%;
height: 100%;
padding: 10px;
}
#nwsArea {
height: 65%;
width: 40%;
background-color: grey;
-webkit-transition: transform 1s, box-shadow 1s;
border: 2px solid silver;
box-shadow: 0 0 15px #777;
}
#nwsArea:hover {
transform: skewY(3deg);
box-shadow: -5px 15px 10px #777;
}
#nwsTtl {
height: 100px;
width: 100%;
background-color: white;
border-radius: 5px;
text-align: center;
border: 2px solid black;
}
#nwsTtl:hover {
background-color: #E3E3E3;
}
#nwsTxt {
font-family: 'Roboto Condensed', sans-serif;
font-size: 40px;
}
#ruschin {
height: 90%;
width: 90%;
padding: 5%;
}
#xBttn {
height: 20px;
padding: 8px;
position: absolute;
display: none;
}
#navLst {
margin: 0 auto;
text-align: center;
}
li {
list-style-type: none;
display: inline-block;
-webkit-transition: color .5s;
}
li:hover {
color: #2B2B2B;
}
.navOp {
padding: 50px;
font-size: 40px;
font-family: 'Droid Sans', sans-serif;
}
#abt,
#prt {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
<div class='padExt'>
<div id='nwsArea'>
<img src='https://www.scmp.com/sites/default/files/2014/05/20/tpbje20140520272_43042097.jpg' id='ruschin'>
<div id='nwsTtl'>
<h3 id='nwsTxt'>Russia and China begin joint military drill</h3>
</div>
</div>
</div>
</div>
This code fades out an image on load after a delay. Is it possible to fade in a new image after the blue circle fades out? http://jsfiddle.net/gabrieleromanato/8puvn/
html
<div id="test"></div>
Javascript
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow');
});
};
})(jQuery);
$('#test').fadeDelay(4000);
CSS
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
do your fade in code inside fadeOut call back.
$(that).fadeOut('slow', function(){
//do fade in
});
sample
(function($) {
$.fn.fadeDelay = function(delay, awake) {
$(awake).hide();
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow', function() {
$(awake).fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000, "#test2"); //pass jquery selector, which element to show
.circle {
margin: 2em auto;
width: 10em;
height: 10em;
border-radius: 50%;
}
#test {
background: #069;
}
#test2 {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="circle"></div>
<div id="test2" class="circle"></div>
Ofcourse it's possible, in jQuery animations second parameter is the function that runs after animation completes. More info
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow',function(){
$('#test2').fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000);
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
#test2 {
margin: 2em auto;
width: 10em;
height: 10em;
background: #f69;
border-radius: 50%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<div id="test2"></div>
Here's jsFiddle
This jquery animation is very choppy in firefox and in both firefox and chrome it frequently has a noticeable delay (~1 second) before it actually starts animating (if I put code to write out tot he console when the onclick handler is called, that will show up immeadiately, but the animation call will have a delay). This delay is not every time, but if you click maybe 5-6 times, you'll see it at least once.
<!doctype html>
<html>
<head>
<title>Test Lag</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
.base
{
position: absolute;
top: 507px;
left: 0px;
width: 1000px;
height: 40px;
z-index: 0;
}
.one
{
position: absolute;
top: 2px;
left: 2px;
width: 994px;
height: 34px;
background-color: #ffffff;
border: solid 1px #505050;
z-index: 3;
opacity: 0.5;
filter: alpha(opacity=50);
}
.oneA
{
position: absolute;
top: 0px;
left: 0px;
width: 966px;
height: 6px;
margin: 10px;
background-color: #999999;
border: solid #cccccc 4px;
}
.two
{
position: absolute;
top: 1px;
left: 1px;
width: 996px;
height: 36px;
background-color: #e8e8e8;
border: solid 1px #505050;
z-index: 2;
opacity: 0.25;
filter: alpha(opacity=25);
}
.three
{
position: absolute;
top: 0px;
left: 0px;
width: 998px;
height: 38px;
background-color: #e8e8e8;
border: solid 1px #505050;
z-index: 1;
opacity: 0.12;
filter: alpha(opacity=12);
}
.four
{
position: absolute;
top: 17px;
left: 17px;
width: 966px;
height: 6px;
background-color: #e8e8e8;
z-index: 0;
opacity: 0.5;
filter: alpha(opacity=50);
}
.five
{
position: absolute;
top: 17px;
left: 17px;
width: 966px;
height: 366px;
z-index: 4;
overflow: hidden;
}
</style>
</head>
<body>
<div id ="base" class="base">
<div id="one" class="one">
<div id="oneA" class="oneA"></div>
</div>
<div id="two" class="two"></div>
<div id="three" class="three"></div>
<div id="four" class="four"></div>
<div id="five" class="five">There's some text in here.</div>
</div>
<script>
var isOn = false;
var jq_base = $('#base');
var jq_one = $('#one');
var jq_oneA = $('#oneA');
var jq_two = $('#two');
var jq_three = $('#three');
var jq_four = $('#four');
var baseTop = 96;
var baseStartTop =507;
var baseHeight = 400;
var oneHeight = 394;
var oneAHeight = 366;
var twoHeight = 396;
var threeHeight = 398;
var fourHeight = 366;
var baseStartH = 40;
var oneStartH = 34;
var oneAStartH = 6;
var twoStartH = 36;
var threeStartH = 38;
var fourStartH = 6
document.onclick = function()
{
//It's opened
if ( isOn )
{
jq_one.animate( { height: oneStartH }, { duration: 300, queue: false } );
jq_oneA.animate( { height: oneAStartH }, { duration: 300, queue: false } );
jq_two.animate( { height: twoStartH }, { duration: 300, queue: false } );
jq_three.animate( { height: threeStartH }, { duration: 300, queue: false } );
jq_four.animate( { height: fourStartH }, { duration: 300, queue: false } );
jq_base.animate(
{ height: baseStartH },
{
duration: 300,
queue: false,
step: function (now)
{
if ( now <= ( baseStartH + 10 ) ) jq_base.animate( { top: baseStartTop }, 800 );
}
}
);
isOn = false;
}
//It's closed
else
{
jq_base.animate(
{ top: baseTop },
{
duration: 800,
step: function (now)
{
if ( now <= 100 )
{
jq_base.animate( { height: baseHeight }, { duration: 300, queue: false } );
jq_one.animate( { height: oneHeight }, { duration: 300, queue: false } );
jq_oneA.animate( { height: oneAHeight }, { duration: 300, queue: false } );
jq_two.animate( { height: twoHeight }, { duration: 300, queue: false } );
jq_three.animate( { height: threeHeight }, { duration: 300, queue: false } );
jq_four.animate( { height: fourHeight }, { duration: 300, queue: false } );
}
}
}
);
isOn = true;
}
}
</script>
</body>
</html>
DEMO: http://jsfiddle.net/fnswz/
I think the problem is in the following part of the if (isOn) branch:
jq_base.animate(
{ height: baseStartH },
{
duration: 300,
queue: false,
step: function (now)
{
if ( now <= ( baseStartH + 10 ) )
jq_base.animate( { top: baseStartTop }, 800 );
}
}
);
Specifically, within the step function of that particular animate() call you start another animation with quite a long duration (800ms), and because it is in the step, even with the if test you are starting multiple animations with that long duration.
That means that although the process reaches a point where it looks finished because everything has moved to its final position, behind the scenes these extra animations haven't finished running and so it doesn't respond properly to subsequent clicks. If you move that 800ms animation out of the step function and simple put it afterwards it seems to make everything work much more smoothly. (At least, it seems much better in Chrome: as I said in my comment above I don't have FF on this computer so I can't test that.)
Here's a demo with the change I'm talking about: http://jsfiddle.net/fnswz/1/
You may want to set a flag animationRunning when you start the animation and then unset it using animate()'s complete callback, so that you can test the flag and ignore clicks until the current animation has finished, but just the change above made a big improvement for me.
(By the way, why are you using document.onclick = ... when you're using jQuery?)