Disable click event until animation completes - javascript

In my game I have a grid populated with words. To spell the words the user has to click on the letters on the side called "drag". When a letter is clicked it animates into position on the grid.
The problem I am having is that the user can click letters rapidly, which crashes the program. To solve this I want to disable the click events until the animation completes.
In the past I have used a setTimeOut function before but it is not a reliable method as the timing all depends on browser speeds.
Here is the click event:
$('.drag').on('click', function (e) {
e.preventDefault();
var target = $('.highlight-problem .drop-box:not(.occupied):first');
var targetPos = target.parents('td').position();
console.log(targetPos);
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
$(".occupied").parent(".flip-wrapper").addClass("flipped");
var clonedObject = b.clone()
if (b.data("letter") == target.parents('td').data("letter")) {
clonedObject.addClass("right-letter");
target.addClass('right-letter');
setTimeout(function () {
hitSound.play();
}, 550);
} else {
clonedObject.addClass("wrong-letter");
target.addClass('wrong-letter');
setTimeout(function () {
missSound.play();
}, 550);
}
clonedObject.appendTo("table").css({
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).stop().animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function () {
$(this).prop('disabled', false).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.highlight-problem .drop-box');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function () {
if ($(this).parents('td').data("letter") == $(this).find("div").data("letter")) {
console.log('letter is: ' + $(this).find("div").data("letter"))
wordIsCorrect++;
}
});

You can do it in simple 3 steps.
Declare a global variable called animationComplete and set it to false.
var animationComplete = false;
In your .animate({...}); function, toggle the value after the animation is complete.
.animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function () {
...
animationComplete = true;
});
Check for the completeness using the global variable.
if (animationComplete)
{
// Do something!
}
Full Code
JavaScript
animationComplete = true;
$(document).ready(function(){
animationComplete = false;
$(".background").animate({
height: 50,
width: 50
}, 10000, function(){
animationComplete = true;
});
$("button").click(function(){
if (animationComplete)
$(".background").animate({
height: 200,
width: 200
}, 10000, function(){
animationComplete = false;
});
else
alert("Please wait till the animation is complete!");
});
});
HTML
<div class="background"></div>
<button>Click me!</button>​
CSS
.background {background: red;}
Fiddle: http://jsfiddle.net/KAryP/
Fiddle for your code here: http://jsfiddle.net/smilburn/Dxxmh/94/

Can't test code atm, but checking if the element is not animated within click function should do
if(!$('selector:animated')){
}

Related

slide right from left with jquery

I'm using this fiddle for a my project but I want to make targets slide from right to left. If you check the link link you can see the targets divs are sliding form left to right.
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
http://jsfiddle.net/sg3s/rs2QK/ here is a demo.
Please help I really appreciate it.
The only quick and dirty option I found was to play with zIndex and reposition non-active elements with right when animation completes.
jQuery(function($) {
$('a.panel').click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$other = $target.siblings('.panel');
if (!$target.hasClass('active')) {
$other.css({zIndex: 1});
$target.addClass('active').show().css({
right: -$target.width(),
zIndex: 2
}).animate({
right: 0
}, 500, function() {
$other.removeClass('active').css({
right: -$other.first().width()
});
});
}
});
});
Another way to filter siblings is:
var href = $(this).attr('href');
var idStr = href.replace(/[#\d]+/g, ''); // = 'target'
var $other = $target.siblings("[id^='" + idStr + "']"); // siblings with id that starts with 'target'
-Updated fiddle-

animating a background image with jquery

I am having a view problems with animating a background to give the impression that a window is opening, I have the animation actually animating but it just animates like the images are in sequence. What I am wanting is to give the impression of a movie or animated gif.
You can see my current attempt here,
http://jsfiddle.net/8nj4934w/
I have so far done the following javascript,
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
self.animate({ 'background-position-y': '-=500px' });
}, 300);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
and the kind of effect I am going for here,
http://www.jeld-wen.com/catalog/exterior-doors
just hover of a door image.
Update (for jQuery solution handling two way sliding)
function slide(that, increment, limit){
var self = $(that);
that.iid && clearInterval( that.iid );
that.pos = that.pos || 0;
return setInterval(function () {
that.pos = that.pos += increment;
if (that.pos === limit){
clearInterval(that.iid);
} else {
self.css({
'background-position': '0 '+ that.pos + 'px'
});
}
}, 50);
}
$('a').bind('mouseenter', function () {
this.iid = slide( this, -500, -11500 );
}).bind('mouseleave', function () {
this.iid = slide(this, 500, 0);
});
Demo at http://jsfiddle.net/g8cypadx/
Original answer
I would suggest that you use CSS transitions with steps.
a {
background-image: url('https://dl.dropboxusercontent.com/u/58586640/9100_FRONT_STRIP.png');
background-repeat: no-repeat;
height: 500px;
width: 500px;
display: block;
background-position: 0 0;
transition: background-position 1s steps(23);
}
a:hover {
background-position: 0 -11500px; /* number of steps times the height */
}
If you have to do it through jQuery then you should animate both properties but with 0 duration for the animation, and small delay for the interval
$('a').bind('mouseenter', function () {
var self = $(this);
this.iid = setInterval(function () {
self.animate({
'background-position': '-=0 -=500px'
}, 0);
}, 50);
}).bind('mouseleave', function () {
this.iid && clearInterval(this.iid);
});
Demo at http://jsfiddle.net/8nj4934w/2/
(the problem with this solution is that it will not stop at the end)

Convert click code to hover code

How can I change the following menu code to open/close when the mouse hovers, instead of when it is clicked on?
var w = 0;
$('.slide').children().each(function () {
w += $(this).outerWidth();
});
$('.outer').width(w + 5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function () {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function () {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
Please check this Demo
In Fiddle, you can see the animation works on click. I need to make it work on hover. Can you help with this ?
Use .hover() api
Try this
$('.open').hover(function () {
instead of
$('.open').toggle(function () {
Just
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
in this part just replace toggle with hover
Try using $('.wrap').hover. If $('.open').hover, you will not able to click the nav items.
Also, you can create another wrapper to just wrap div.outer and a.open only
$('.wrap').hover(function() {
$('.slide').stop().animate({
left : 0
});
//this is the .wrap right now
$(this).find('a.open').html('close');
}, function() {
$('.slide').stop().animate({
left : w
});
//this is the .wrap right now
$(this).find('a.open').html('open');
});
http://jsfiddle.net/rooseve/42sWB/2/
$('.open').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseleave') {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
} else {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
});
var w = 0;
var isVisible = false;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').on("mouseover", function() {
if(isVisible == false) {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
isVisible = true;
}
else {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
isVisible = false;
}
});
Firstly, when you hover the element - the div will be visible, until you hover the element for the second time.
Demo: http://jsfiddle.net/42sWB/3/

Toggling height of single div in group of divs

I have a number of divs with the same class on one page. I would like them to have a fixed height which expands to full height when clicking a toggle button. So far I have assembled a script from the internet which sort of does that, but currently it expands ALL divs on the page, not just the one div associated with the expand buttons. Could someone help me fix the script so it only expands one div, possibly resets the other one if it is expanded and toggles it back when the expand button is click again?
jQuery(document).ready(function($) {
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
var $dscr = $(".textblock"),
$switch = $(".expand a"),
$initHeight = 130; // Initial height
$dscr.each(function() {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({ overflow: "hidden", height: $initHeight + 'px' });
$switch.toggleClick(function() {
$dscr.animate({ height: $dscr.data("realHeight") }, 300);
$switch.html("-");
}, function() {
$dscr.animate({ height: $initHeight}, 300);
$switch.html("+");
});
});
See my jsfiddle for the script so far:
http://jsfiddle.net/N9DfH/1/
http://jsfiddle.net/N9DfH/21/
jQuery(document).ready(function () {
$.fn.toggleClick = function () {
var functions = arguments;
return this.each(function () {
var divel = $(this);
$('.expand a', divel.parent()).click(function () {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(divel, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
});
};
var $dscr = $(".textblock"),
$initHeight = 130; // Initial height
$dscr.each(function () {
$.data(this, "realHeight", $(this).height()); // Create new property realHeight
}).css({
overflow: "hidden",
height: $initHeight + 'px'
}).toggleClick(function () {
this.animate({
height: this.data("realHeight")
}, 300);
}, function () {
this.animate({
height: $initHeight
}, 300);
});
});

How to make a div expand (by sliding outwards) in width on mouse click

I want a div to expand to the right on click from its current width (400px) to a certain specified width. (The divs have photos as backgrounds so the end result width will be different in each case, but it will be about 1000px in most cases).
How can I do this with jquery/javascipt? Thanks
With a defined width:
$(".clickElement").click(function(){
if($(this).is(".open"))
{
$(this).animate({ width: 400}, 500);
}
else
{
$(this).animate({ width: 1000}, 500);
}
$(this).toggleClass("open");
});
Checking the width of the image (background): See this fiddle: http://jsfiddle.net/4ZfsD/2/
function toggle() {
if ($(this).is(".open")) {
$(this).animate({
width: 400
}, 500);
}
else {
$(this).animate({
width: $(this).data("width")
}, 500);
}
$(this).toggleClass("open");
}
$("#test").click(function() {
// No image width yet, we have to get it from the image
if (!$(this).data("width")) {
var img = new Image();
var _this = $(this);
img.onload = function() {
// Image is loaded, save the width and call the toggle function
_this.data("width", this.width);
toggle.call(_this);
}
img.src = $(this).css("backgroundImage").replace("url(\"", "").replace("\")", "");
} else { // We already got a width, just call toggle function
toggle.call(this);
}
});
CSS:
#test
{
width: 400px;
height: 400px;
background-image:url("http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg");
}
Using Jquery
<div id="box">Click me to grow</div>
<script>
$("#box").one( "click", function () {
$( this ).css( "width","+=200" );
});
</script>

Categories