Javascript 在单击时切换函数

我试图打开和关闭一个功能点击-切换一个功能

我希望

.fly

元素不会消失，只有动画应该停止并返回其原点。单击按钮时，动画应停止。再次单击时，动画将再次启动

HTML

    <div class="hobbie-box">
      <div class="circle-image">
        <i id="travel" class="fa fa-plane fly"></i>
      </div>
      <div class="circle-text">
        <p>Travel industry</p>
      </div>
    </div>

  <button type="button" class="btn toggle-effects">Turn off effects</button>

---

首先，如果需要在延迟后执行一次事件，则应使用setTimeout（）函数而不是setInterval（）

不必在JavaScript中使用

.animate

，只需使用

.toggleClass（）

函数向元素添加一个类

fly

这是一个工作片段：

var$fly=$（'.fly'）；
var flyplane=函数（）{
setTimeout（函数（）{
$fly.toggleClass（'fly'）；
}, 2000);
};
flyplane（）；
$（“.toggle effects”）。打开（“单击”，函数（）{
$（“#旅行”）。切换（0，flyplane）；
}); //结束按钮点击

.fly{
右：-50
底部：+50
}

旅游业

您可以检查这样的变量

$fly=$（“.fly”）
飞=真
flyplane=函数（）{
setInterval（函数（）{
如果（飞行）{
$fly.animate({
右：'-=50'，
底部：'+=50'
}，2000，函数（）{
$fly.removeAttr（“风格”）；
});
}
}, 2000);
};
$（“.toggle effects”）。打开（“单击”，函数（）{
飞，飞
});
.fly{
宽度：3倍；
高度：3倍；
位置：绝对位置；
背景色：#00ff00；
}

有一个活生生的例子。
请参阅


不确定这是否是您试图实现的目标，但是，如果使用
setInterval
：


必须将其保存到变量中，例如
variable=setInterval（function（）{/*…*/}，2000）

要停止间隔，必须使用
clearInterval
，例如
clearInterval（变量）

然后，要再次启动间隔，必须再次调用
setInterval
，因此最好将代码封装到函数中，这样就不需要重写相同的代码两次
因为您的
flyplane
功能已经存在，所以我只使用了它

请看下面的片段，并告诉我这是否是您想要实现的目标：


$（函数（）{
变量$fly=$（'.fly'），间隔；
var flyplane=函数（）{
间隔=设置间隔（函数（）{
$fly.animate({
右：'-=50'，
底部：'+=50'
}，2000，函数（）{
$fly.removeAttr（“风格”）；
});
}, 2000);
};
flyplane（）；
$（“.toggle effects”）。打开（“单击”，函数（）{
$（this）.text（函数（i，text）{
如果（文本==“关闭效果”）{
间隔时间；
返回“打开效果”；
}
否则{
flyplane（）；
返回“关闭效果”；
}
})
})；//结束按钮单击
});
.fly{
显示：块；
宽度：20px；
高度：20px；
背景颜色：黄色；
位置：绝对位置；
}

旅游业

关闭效果
谢谢您的回答。我决定尝试使用css方法制作动画作为指导

我所做的只是添加css动画：

i.fly {
  -webkit-animation-name: flying;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-name: flying;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes flying {
  0% {
    right: 0px;
    bottom: 0px;
  }
  100% {
    right: -50px;
    bottom: 50px;
  }
}

@keyframes flying {
  0% {
    right: 0px;
    bottom: 0px;
  }
  100% {
    right: -50px;
    bottom: 50px;
  }
}

关于js：

$("#travel").toggleClass("fly");

最重要的是用按钮切换效果
你应该把你的CSS代码和按钮的HTML代码放在一起，因为我们可以更容易地测试和实现你想要的效果。这很好，但我需要在点击事件后切换fly=false返回true。它应该在每次单击时在true和false之间切换
#travel {
  width: 50px;
  height: 50px;
  background-color: red;
  display: block;
  position: relative;
}

var $fly = $('.fly');

var flyplane = function() {

    $fly.animate({
      right: '-=50',
      bottom: '+=50'
    }, 2000, function() {
      console.log('animation complete')
      $fly.removeAttr("style");
      flyplane();
    });
};

//flyplane();
var count = 1;
$(".toggle-effects").on("click", function() {
  console.log('click');
  var isHidden = count++%2 !== 0;
  if( isHidden ) {
    $("#travel").show( 0, flyplane);  
  } else {
    $("#travel").hide( 0 );
      $fly.stop();
  }

}); //end of button click

i.fly {
  -webkit-animation-name: flying;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-name: flying;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes flying {
  0% {
    right: 0px;
    bottom: 0px;
  }
  100% {
    right: -50px;
    bottom: 50px;
  }
}

@keyframes flying {
  0% {
    right: 0px;
    bottom: 0px;
  }
  100% {
    right: -50px;
    bottom: 50px;
  }
}

$("#travel").toggleClass("fly");