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

Answer 1

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.