Question

im trying to basically make it so the user can’t click #shareheart twice in a row, making the animation screw up. Maybe you could say i’m trying to create an active state without adding and removing classes?

why doesn’t this work? The first piece of code is what’s not working, it’s not following this if statement, did i do something wrong here?

if($('.share-text').not(':animated') && $('.share-text span').is(':visible')) {
    // do something
}

Here’s the full code:

$('#shareheart').click(function() {
    if ($('.share-text:animated').length == 0 && $('.share-text span').is(':visible')) {
        $('.share-text span').animate({'opacity': '0'}, 800, function() {
            $("#share-what").fadeOut(400)
            $('.share-text').stop(true, false).animate({'width': 'toggle','padding-left': 'toggle','padding-right': 'toggle'}, 800)
            $('#short-url').css('background-image', "url('images/drink.png')");
        })
    } else {
        $('.share-text').stop(false, true).animate({'width': 'toggle','padding-left': 'toggle','padding-right': 'toggle'}, 800, function() {
            $('.share-text span').animate({'opacity': '1'}, 800)
        });
    }
});

Answer 1

Alternatively, you can combine your condition to a single selector:

if($(".share-text:not(:animated) span:visible").length)
{
}

The condition will return 0 (a false value) if it share-text is a animated, or if the span is invisible.