CODEWITHSUNDEEP
javascriptjquery
Thomas
Thomas

Reputation: 15

How do I make 1 change a second

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

Answers (2)

ggzone
ggzone

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

adeneo
adeneo

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

Related Questions