Make a div clickable only one times

Question

I have a function that when a div is click, an animation is proceed. and I want that the user is able to click only one times for not load that animation at every click. Maybe a div clickable one time or a if in the function but I'm not that good in code :)

this is the code

$(function() {    
    $('#valerie').click(function() {

        $('.logo').animate({
            'left': 3 + '%'
        }, 900);
        $('#title2').animate({
            'font-size': 40 + 'px',
            'top': 42 + '%'
        }, 900);
        $('body').css({
            'overflow': "auto"
        }, 20);
    });
});

i have two div side by side, if you click on one, it take 90% of the page and the other 10%. So if i click on the left div for exemple it will take 90% of the page but if i click on the right div after and then want to return on the left div. I won't be able to do it with the ".one" jquery command you tell me. Thanks for your quick answer ! — Steve D, Feb 17 '16 at 10:05

score 3 · Answer 1 · answered Feb 17 '16 at 09:47

3

Use jQuery .one().

$('#valerie').one('click', function() {
    $('.logo').animate({'left':  3    + '%'},900);
    $('#title2').animate({'font-size': 40 + 'px','top': 42 + '%'},900);
    $('body').css({'overflow': "auto" },20);
});

answered Feb 17 '16 at 09:47

Ibrahim Khan

20,616
7
42
55

thanks, it resolve the first step of my problem. i have two div side by side, if you click on one, it take 90% of the page and the other 10%. So if i click on the left div for exemple it will take 90% of the page but if i click on the right div after and then want to return on the left div. I won't be able to do it with the ".one" jquery command you tell me. Thanks for your quick answer ! – Steve D Feb 17 '16 at 09:53
I don't know what are you trying to do. This fiddle https://jsfiddle.net/td6a8pwu/ may help you. @SteveD – Ibrahim Khan Feb 17 '16 at 10:31

score 1 · Answer 2 · answered Feb 17 '16 at 10:00

1

You can try .off(event) after your logic on that event

$('#valerie').on('click', function () {
        $('.logo').animate({
            'left': 3 + '%'
        }, 900);
        $('#title2').animate({
            'font-size': 40 + 'px',
            'top': 42 + '%'
        }, 900);
        $('body').css({
            'overflow': "auto"
        }, 20);

        $(this).off(event);
    });

answered Feb 17 '16 at 10:00

Dhiraj

98
7

how to rebind if needed? – Jai Feb 17 '16 at 10:00
you can check it [here](http://stackoverflow.com/questions/13940591/how-to-bind-unbind-and-rebind-click-events-in-jquery) – Dhiraj Feb 17 '16 at 10:27

score 0 · Answer 3 · answered Feb 17 '16 at 09:50

0

You can use one() method as @Azim suggest, or you can use stop() if you want to make the animation ends after new animation is request:

$('#valerie').on('click', function() {

    $('.logo').stop().animate({
        'left': 3 + '%'
    }, 900);
    $('#title2').stop().animate({
        'font-size': 40 + 'px',
        'top': 42 + '%'
    }, 900);
    $('body').css({
        'overflow': "auto"
    }, 20);


});

This is because I am not sure that you need only once the animation or you need to avoid the multiple animations after ends.

answered Feb 17 '16 at 09:50

Marcos Pérez Gude

21,869
4
38
69

i want to avoid the mutiple animation ! – Steve D Feb 17 '16 at 09:58
According to your comment in the @Azim answer, your solution is this answer. Use `stop()` to stop the animation in every click that the animation hasn't finish. – Marcos Pérez Gude Feb 17 '16 at 10:53

score 0 · Answer 4 · answered Feb 17 '16 at 09:52

0

use jquery one()

$('#valerie').one('click', function() {

})

answered Feb 17 '16 at 09:52

Jobelle

2,717
1
15
26

same answers like @Azim 17 mins ago – guradio Feb 17 '16 at 10:05

score 0 · Answer 5 · answered Feb 17 '16 at 09:54

There is a .one method in jquery for one time click event.

$('#valerie').one('click', function() {

    $('.logo').animate({
        'left': 3 + '%'
    }, 900);
    $('#title2').animate({
        'font-size': 40 + 'px',
        'top': 42 + '%'
    }, 900);
    $('body').css({
        'overflow': "auto"
    }, 20);

   });

Jai · Answer 6 · 2016-02-17T10:03:46.760

0

You can make use of :animated:

$('#valerie').click(function() {
    if($(':animated').length || $('body').css('overflow') === "auto"){// <---add this 
        return; 
    }  
    $('.logo').animate({'left':  3    + '%'},900);
    $('#title2').animate({'font-size': 40 + 'px','top': 42 + '%'},900);
    $('body').css({'overflow': "auto" },20);
});

edited Feb 17 '16 at 10:03

answered Feb 17 '16 at 09:58

Jai

74,255
12
74
103

Make a div clickable only one times

6 Answers6