Reputation: 15
I have some trouble getting my code to work. I want to have a picture move only 1 time every 1 second. What happens now is that it keeps going places where I click and continueing the animation afterwards, and I don't want that. This is my sercaint script:
$(bullet_place).ready(function() {
$(".range").click(function(e) {
$("#bullet_place").delay(50).fadeIn(0);
var x = e.pageX - 27,
y = e.pageY - 22;
$("#place").html("<style type=text/css> #bullet_place { position: fixed; > left: " + x + "; top:" + y + "; width: 50px; } </style>");
$("#bullet_place").delay(750).fadeOut(500);
})
});
Upvotes: 0
Views: 117
Reputation: 3721
If i get it right, after click you need to unbind or restrict the click event, and after your animation is done (in the callback function) readd the event. This may look like this (UNTESTED!):
var clickEvent = true;
$(".range").click(function (e) {
if (clickEvent) {
clickEvent = false;
$("#bullet_place").delay(50).fadeIn(0);
var x = e.pageX - 27,
y = e.pageY - 22;
$("#place").html("<style type=text/css> #bullet_place { position: fixed; > left: " + x + "; top:" + y + "; width: 50px; } </style>");
$("#bullet_place").delay(750).fadeOut(500, function () {
clickEvent = true;
});
}
});
Upvotes: 0
Reputation: 318372
First of all, only the document has a ready handler.
Secondly, only the head section should contain style tags (this is about to change in newer browsers).
To throttle the click, use on()
and off()
with a timeout
$(document).ready(function() {
$(".range").on('click', move);
});
function move(e) {
$(".range").off('click');
setTimeout(function() {
$(".range").on('click', move);
}, 1000);
$("#bullet_place").delay(50)
.fadeIn(0)
.css({
position : 'fixed',
left : e.pageX - 27,
top : e.pageY - 22,
width : '50px'
});
$("#bullet_place").delay(750).fadeOut(500); // you're sure you shouldn't
} // be using a callback ?
Upvotes: 1