我的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');


我想要某种切换功能,以便如果反复单击该按钮,则照片会根据单击按钮时的位置保持在页面上的滑动。

谢谢

最佳答案

这是一个例子:

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


我没有测试过,所以我不保证它能工作。

09-11 07:29