0

So i'm pretty new to coding, yet I managed to write this jquery animation set for an LP, I am trying to use this hand to gesture the client with a wiggle from side to side, and when he clicks on the hand, the div disappears (forever.)

Since atm my rotate trials didn't work out, I just used a fade in / out for now.

I want it to work properly after the other divs disappear. I thought it had to do something with setInterval() so I searched on that too with no success. Can you show me how to add code that would make the hand wiggle/rotate and then disappear after clicked on?

The hand that Wiggles!

Many thanks guys.

My HTML

    <div class="box">
        <div class="row headsup">
            <h1>This is a page</h1>
            <p>Press F11 For FullScreen</p>
            <button id="closer" style="margin-bottom: 0px;" type="submit" class="">press here to close this window</button>
        </div>
    </div>
    <div class="row headsup">
        <h1 class="wiggle">Just Wiggle It Around</h1>
</div>
    <div class="mc"><img style="" src="img/cursurredhand100x100.png"></div>

My Javascript

$("#closer").click(function(){
    $(".box").delay(300).hide("slow", function (){
        $(".howto").css({
            display:'block',
            'z-index': '100'
    });
    });
    $(".wiggle").delay(2500).hide("slow");


$(".howto").click(function(){
   $(".howto").slideToggle( "slow", function() {
       $("#LG").fadeIn();

   });
});

});
function fadeIn() {
    jQuery(".mc").fadeIn(900);
    fadeOut();
}

function fadeOut() {
    jQuery(".mc").fadeOut(400);
    fadeIn();


}

fadeOut();
erezT
  • 186
  • 17

1 Answers1

1

I do not understand exactly what you want to do, but it seems that you have an infinite loop problem because in your fadeIn function you are calling fadeOut wich is calling fadeIn again. Additionally if your intention is to execute a fadeIn after a fadeOut or vice versa you have to place it in the callback function because in jquery the execution is not sequencial.

You have to write $(".mc").fadeOut(400, function(){$(".mc").fadeIn(900)})

JArgente
  • 2,239
  • 1
  • 9
  • 11
  • Hi , I am trying to rotate right 7deg and then -7deg. When pressed on element it would just dissapear – erezT Feb 29 '16 at 15:56
  • 1
    to achieve the rotate effect see [link](http://stackoverflow.com/questions/3020904/how-to-rotate-a-div-using-jquery) for the after fade out effect, you can try: $( ".mc" ).animate({opacity: 0}, 400). This would change the opacity of your element progressively during 400ms until it gets completely transparent – JArgente Feb 29 '16 at 16:14