Question

我正在尝试打开并关闭点击功能 - 切换功能。

我希望.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>

的Javascript

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


$(".toggle-effects").on("click", function () {
        $(this).text(function (i, text) {
          return text === "Turn off effects" ? "Turn on effects" : "Turn off effects";
        })
        $("#travel").toggle($fly);
      }); //end of button click

Answer 1

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

而不是在JavaScript中使用.animate，您只需使用fly函数向您的元素添加一个类.toggleClass()。

这是一个有效的片段：

var $fly = $('.fly');

var flyplane = function() {
  setTimeout(function() {
    $fly.toggleClass('fly');
  }, 2000);
};

flyplane();

$(".toggle-effects").on("click", function() {
  $("#travel").toggle(0, flyplane);
}); //end of button click

.fly{
  
      right: -50
      bottom: +50
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="hobbie-box">
  <div class="circle-image">
    <i id="travel" class="fa fa-plane"></i>
  </div>
  <div class="circle-text">
    <p>Travel industry</p>
  </div>
</div>
<input type="button" class="toggle-effects" value="click" />

Answer 2

你可以检查一下像这样的

＆＃13;

$fly = $(".fly")

fly = true

flyplane = function(){
        setInterval(function() {
          if(fly){
            $fly.animate({
                right: '-=50',
                bottom: '+=50'
            }, 2000, function() {
                $fly.removeAttr("style");
            });
          }
        }, 2000);
  
    };

$(".toggle-effects").on("click", function () {
  fly = !fly
});

＆＃13;

.fly{
    width: 3px;
    height: 3px;
    position: absolute;
    background-color: #00ff00;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fly"></div>

＆＃13;

Answer 3

有一个实例。请参阅my codepen

 <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 class='toggle-effects'>[btn]</button>

#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

Answer 4

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

您必须将其保存到变量中，例如variable = setInterval(function() { /* ... */ }, 2000);
要停止间隔，您必须使用clearInterval，例如clearInterval(variable);。
然后，要再次为间隔加注星标，必须再次调用setInterval，因此最好将代码封装到函数中，这样就不需要重写相同的代码两次了。
因为你的flyplane功能已经存在，我只使用它。

看一下下面的片段，告诉我这是不是你想要实现的目标：

$(function() {
  var $fly = $('.fly'), interval;
  var flyplane = function() {
    interval = setInterval(function() {
      $fly.animate({
        right: '-=50',
        bottom: '+=50'
      }, 2000, function() {
        $fly.removeAttr("style");
      });
    }, 2000);
  };
  flyplane();


  $(".toggle-effects").on("click", function() {
    $(this).text(function(i, text) {
      if (text === "Turn off effects") {
        clearInterval(interval);
        return "Turn on effects";
      }
      else {
        flyplane();
        return "Turn off effects";
      }
    })
  }); //end of button click
});

.fly {
  display: block;
  width: 20px;
  height: 20px;
  background-color: yellow;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 5

感谢您的回答。我决定使用http://www.w3schools.com/css/css3_animations.asp作为指导，尝试使用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;
  }
}

on js：

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

最重要的是用按钮切换效果

单击时切换功能

5 个答案: