javascript - jquery animate，如果条件执行相反的 Action

Question

我正在尝试为 div 设置动画。这个想法是，当客户滚动到 div 它变成动画时......如果客户滚动回到页面顶部，这个 div 运行与第一个动画相反的 Action (如淡入/淡出)

关键是在第一个动画之后，第二个动画永远不会运行。

这是我的代码:

<div class="wrapper">
 <div class="face_content">
  <img src="img/face.jpg">
 </div>
 <div class="face_text">
  <p>some text here</p>
 </div>
</div>

然后我用 jquery 尝试这个 javascript

var face_dist = $('.wrapper').offset().top;
$(window).scroll(function () {
 //show the face
 var face_diff = face_dist - $(window).scrollTop();
 if(face_diff < 200) {
  show_sch();
 }

 if($('.face_content').hasClass('showing')) {
  if(face_diff > 200) {
   hide_sch();
  }
 }
});

function show_sch() {
    $('.face_content img').animate({
        'opacity': 1,
        'right': 0
    },1000, function() {
        $('.face_content').addClass('showing');
    });
    $('.face_text ul').animate({
        'opacity': 1,
        'left': 0
    },1000);
}

function hide_sch() {
    $('.face_content img').animate({
        'opacity': 0,
        'right': 80
    },1000);
    $('.face_text ul').animate({
        'opacity': 0,
        'left': 80
    },1000);
}

有什么想法吗？ (第一个动画正常运行，但第二个根本没有。

Answer 1

问题是因为您的 face_diff 值永远不会超过 200，但会小于 -200。你的动画播放了很多时间。您可以通过检查是否处于事件状态来控制它。

请尝试以下

var face_dist = $('.wrapper').offset().top;
var active = 0; 
$(window).scroll(function () {
 //show the face
 var face_diff = face_dist - $(window).scrollTop();
 if(face_diff < 200 && face_diff >= 0) {
   if(active==0){
      active=1;
      show_sch();
    }
  
 }

 if($('.face_content').hasClass('showing')) {
  if(face_diff < -200) {
   if(active==0){
      active=1;
      hide_sch();
    }
  }
 }
});

function show_sch() {
    $('.face_content img').animate({
        'opacity': 1,
        'right': 0
    },1000, function() {
      $('.face_content').addClass('showing');
      active=0;
    });
    $('.face_text ul').animate({
        'opacity': 1,
        'left': 0
    },1000,function(){
      active=0;
    });
}

function hide_sch() {
    $('.face_content img').animate({
        'opacity': 0,
        'right': 80
    },1000,function(){
       active=0;
    });
    $('.face_text ul').animate({
        'opacity': 0,
        'left': 80
    },1000,function(){
      active=0;
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
 <div class="face_content">
  <img style="opacity:0" src="https://www.dpreview.com/files/p/articles/7192167506/images/intro.jpeg">
 </div>
 <div class="face_text">
  <p>some text here</p>
 </div>
</div>