Switching Animate.css classes with jQuery

Question

I have an image and a button in my HTML document:-

<img src="logo.png" id="myphoto"/>
<button id="photo" onclick="animate_photo();">Slide off page</button>

I then have a jQuery function to make the image fly of the page and change the button text when the button is clicked as follows:-

function animate_photo() {  

$('img#myphoto').addClass('animated bounceOutLeft');
$('button#photo').html('Slide back onto page');

}

Everything is working well so far. Please will you let me know how I can improve the function so that if the button if clicked again the photo slides back into position. The class to make the photo slide back is:-

$('img#myphoto').addClass('animated bounceInLeft');

I would like some kind of toggle functionality so that if the button is clicked repeatedly the photo keeps sliding on / off the page depending on its position when the button is clicked.

Thank you

Beniamin Szabo · Accepted Answer · 2013-09-19 12:36:40Z

2

Here is an example:

function animate_photo() {  
  if($('img#myphoto').hasClass('bounceOutLeft')){
    $('img#myphoto').removeClass('bounceOutLeft').addClass('animated bounceInLeft');
    $('button#photo').html('Slide off page');
  }else{
    $('img#myphoto').removeClass('bounceInLeft').addClass('animated bounceOutLeft');
    $('button#photo').html('Slide back onto page');
  }
}

I didn't tested it so i don't guarantee it works.

answered Sep 19, 2013 at 12:36

Beniamin Szabo

1,9294 gold badges17 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Switching Animate.css classes with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related