Trouble combining if / else with .click in jQuery

Question

This is my javascript

$(document).ready(function(){
        $('.frontpageimg').click(function(){
            $(this).data('clicked', true);
        });
        if('.frontpageimg').data('clicked') {
            $('#imagepos').slideUp(2000).fadeOut(2000);
            $('#contentpos').slideUp(2000).fadeIn(2000);
        } else {
            $('#imagepos').delay(8000).slideUp(2000).fadeOut(2000);
            $('#contentpos').delay(8000).slideUp(2000).fadeIn(5000);
        }
    });

The website animates to show the main content after a delay, which is what's supposed to happen. However, I want the user to be able to skip waiting and activate a shorter animation by clicking on an image. Currently everything under the 'else' part works, but nothing happens when the image is clicked.

EDIT: I've changed the code in an attempt to get things working, still doesn't do what I want it to.

$(document).ready(function(){
        $('#imagepos').delay(8000).slideUp(2000).fadeOut(2000);
        $('#contentpos').delay(8000).slideUp(2000).fadeIn(5000);    
    });
    $('#frontpageimg').click(function(){
                $('div:animated').stop();
                $('div:animated').clearQueue();
                $('#imagepos').slideUp(2000).fadeOut(2000);
                $('#contentpos').slideUp(2000).fadeIn(2000);
            });

There is a syntax error in your code if('.frontpageimg') — Ram
– Ram, Commented Aug 29, 2012 at 22:34
Not sure how anything in the if/else block is working, code execution should stop with an error on the if line — MrOBrian
– MrOBrian, Commented Aug 29, 2012 at 22:35
Fixed the syntax error, and moved around a bunch of things before settling with the current attempt. It still doesn't work, but isn't throwing up any errors. — MWhitmore
– MWhitmore, Commented Aug 30, 2012 at 17:50

Nicholas Albion · Accepted Answer · 2012-08-29 22:42:30Z

3

You're binding the click handler within the function (which is only called once, in a single threaded environment) that you are trying to change the behavior of.

You would be better off trying to cancel or modify the animation sequence (if it is still running) from the cluck handler, alternatively, you could have your animation sequence check to see if the button has been clicked

answered Aug 29, 2012 at 22:42

Nicholas Albion

3,2948 gold badges37 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MWhitmore Over a year ago

Can I use .fadein/out and .slideup in an .animate method?

Collectives™ on Stack Overflow

Trouble combining if / else with .click in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related