Home › Forums › JavaScript › Jquery animation issue
- This topic is empty.
Viewing 1 post (of 1 total)
-
AuthorPosts
-
September 1, 2011 at 7:51 pm #34186
boxadesign
MemberHey all, I have the following perfoming some animation sequences. The thing I wanted to happen was that the event only happens when there is no animation (kind of like unbing the click and the rebinding when over).
The code below works great.
var animating = false;
$("#tweet_activate a").click(function() {
if (animating !== true) {
animating = true;
if ($('body').hasClass('home')) {
$(this).parent().stop(true, true).animate({
top: "+=154"
}, 400).delay(1200).fadeOut();
} else {
$("#int_comp").animate({
width: "+=157"
}, 100);
$(this).parent().stop(true, true).animate({
top: "+=154"
}, 400).delay(1200).fadeOut();
}
$("#tweet_text").delay(400).animate({
right: "+=56"
}, 400);
$("#tweet").delay(900).animate({
right: "+=214"
}, 400);
$("#tweet_deactivate").delay(1200).fadeIn();
$("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
$("#eye").delay(600).fadeOut(function() {
animating = false; // this is a guess. but place this where ever the animation is stopping.
});
}
return false;
});
$("#tweet_deactivate a").click(function(){
if (animating !== true) {
animating = true;
if($('body').hasClass('home')) {
} else {
$("#int_comp").animate({
width: "-=157"
}, 400);
}
$("#tweet_text p, #tweet_text span, #tweet #links").fadeOut();
$("#tweet").stop(true,true).animate({
right: "-=214"
}, 400);
$("#tweet_text").delay(400).animate({
right: "-=56"
}, 400);
$(this).parent().delay(900).animate({
top: "-=154"
}, 400).delay(200).fadeOut()
.delay(600).animate({
top: "+=154"
}, 100);
$("#tweet_activate").animate({
top: "-=154"
}, 500).delay(650).fadeIn();
$("#eye").delay(1000).fadeIn(function() {
animating = false; // this is a guess. but place this where ever the animation is stopping.
});
}
return false;
});
Unfortunately this code doesn’t work on a very similar function…
$("#eye a").click(function(){
if (animating !== true) {
animating = true;
if($('body').hasClass('home')) {
$(this).parent().stop(true,true).animate({
right: "-=58"
}, 400)
.delay(400).animate({
top: "-=59"
}, 400).fadeOut();
$("#eye_close").delay(1050).fadeIn();
} else {
$(this).parent().stop(true,true).animate({
right: "-=58"
}, 400).fadeOut();
$container.removeClass("small");
$container.addClass("wide");
$container.masonry({
itemSelector: '.box',
isAnimated: true,
isFitWidth: true
});
$("#eye_close").delay(250).fadeIn();
}
$("#tweet").stop(true,true).animate({
right: "-=57"
}, 400);
$("#nav_wrap").stop(true,true).animate({
left: "-=340"
}, 400);
$("#content_area").stop(true,true).delay(800).animate({
top: "-=57"
}, 400, function() {
animating = false;
});
}
return false;
});
$("#eye_close a").click(function(){
if (animating !== true) {
animating = true;
if($('body').hasClass('home')) {
$(this).parent().stop(true,true).animate({
top: "+=59"
}, 400)
.delay(400).animate({
right: "+=58"
}, 400).fadeOut()
.animate({
right: "-=58",
top: "-=59"
}, 100);
$("#eye").animate({
right: "+=58",
top: "+=59"
}, 400).delay(600).fadeIn();
$("#tweet").stop(true,true).delay(830).animate({
right: "+=57"
}, 400);
} else {
$(this).parent().stop(true,true).animate({
right: "+=58"
}, 400).delay(200).fadeOut().animate({
right: "-=58"
}, 400);
$("#eye").animate({
right: "+=58"
}, 400).fadeIn();
$("#tweet").stop(true,true).animate({
right: "+=57"
}, 400);
$container.removeClass("wide");
$container.addClass("small");
$container.masonry({
itemSelector: '.box',
isAnimated: true,
isFitWidth: false
});
}
$("#nav_wrap").stop(true,true).animate({
left: "+=340"
}, 400);
$("#content_area").stop(true,true).delay(10).animate({
top: "+=57"
}, 400, function() {
animating = false;
});
}
return false;
});I think it maybe something to do with the very last bit of code (}, 400, function() {)
Any help would be great. -
AuthorPosts
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.