jquery - 使用 jQuery 切换 Animate.css 类

Question

我的 HTML 文档中有一个图像和一个按钮:-

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

<小时/>

然后，我有一个 jQuery 函数，可以使图像飞出页面，并在单击按钮时更改按钮文本，如下所示:-

function animate_photo() {  

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

}

到目前为止一切进展顺利。请让我知道如何改进该功能，以便再次单击该按钮时照片会滑回原位。使照片向后滑动的类是:-

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

我想要某种切换功能，这样如果重复单击按钮，照片就会根据单击按钮时的位置不断滑入/滑出页面。

谢谢

Answer 1

这是一个例子:

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');
  }
}

我没有测试过它，所以我不保证它有效。