Question

http://jsfiddle.net/motocomdigital/uTV5k/18/

I’ve updated using toggle instead on click – though still can’t get smooth alternations.

I’ve got a mix of javascript and jquery here.

I’m trying to get an element, so when it is clicked, it runs an animation (open). And on the second click, the animation runs to the starting point (close).

But for some reason I can’t get the second click alternation to work. Can anyone advise on what I’m doing wrong? Thanks

The $('.home-module').toggle is the bit I’m having problems with.

See script below…

$(window).load(function(){

    $(window).bind("orientationchange resize", function(e) {

        $('.home-module').each(function() {

            var homeModule  = $(this).height(),
                homeTitle   = $(this).find('.home-title-button').outerHeight(),
                homeStart   = homeModule - homeTitle,
                homeOpen    = false;

            $(this).find('.home-title').css("top", homeStart + "px");

            $('.home-module').toggle(
                function() {
                    // first alternation
                    $(this).find('.home-title').animate({ top: homeStart + "px" });
                },
                function() {
                    // second alternation
                    $(this).find('.home-title').animate({ top: 0 + "px" });
                }
            );

        }); 

    }).trigger("resize");

});

It seems to be really unresponsive on the click to animations, and the second click/alternation is really delayed and does strange things?

Thanks

---

My original code…

$(window).load(function(){

    $(window).bind("orientationchange resize", function(e) {

        $('.home-module').each(function() {

            var homeModule  = $(this).height(),
                homeTitle   = $(this).find('.home-title-button').outerHeight(),
                homeStart   = homeModule - homeTitle,
                homeOpen    = true;

            $(this).find('.home-title').css("top", homeStart + "px");

            $('.home-module').on('click', function () {

                if (homeOpen) {

                    $(this).find('.home-title').animate({ top: homeStart + "px" });
                    homeOpen = false;

                } else {

                    $(this).find('.home-title').animate({ top: 0 + "px" });
                    homeOpen = true; 

                }
            });

        }); 

    }).trigger("resize");

});

Answer 1

homeOpen is always set to false so your if (homeOpen) condition is never satisfied.