Javascript Jquery设置动画，如果条件允许，则执行相反的操作

我正在尝试制作div动画。这个想法是，当客户滚动到div时，它就会变成动画。。。如果客户滚动回页面顶部，div将运行与第一个动画相反的操作（如fadein/out）

重点是，在第一个动画之后，第二个动画永远不会运行

这是我的代码：

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

var face_dist=$（'.wrapper'）.offset（）.top；
$（窗口）。滚动（函数（）{
//露脸
var face_diff=face_dist-$（窗口）；
如果（面_差值<200）{
show_sch（）；
}
if（$（'.face_content'）.hasClass（'showing'））{
如果（面_差异>200）{
隐藏_sch（）；
}
}
});
函数show_sch（）{
$（'.face_content img'）。设置动画({
“不透明度”：1，
“右”：0
}，1000，函数（）{
$（'.face_content'）.addClass（'showing'）；
});
$（'.face_text ul'）。设置动画({
“不透明度”：1，
“左”：0
},1000);
}
函数hide_sch（）{
$（'.face_content img'）。设置动画({
“不透明度”：0，
“对”：80
},1000);
$（'.face_text ul'）。设置动画({
“不透明度”：0，
左：80
},1000);
}

---

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

问题是因为您的

face_diff

值从未超过200，但小于-200。并且您的动画播放时间很长。您可以通过检查是否处于活动状态来控制此问题

请在下面试试

var face_dist=$（'.wrapper'）.offset（）.top；
var-active=0；
$（窗口）。滚动（函数（）{
//露脸
var face_diff=face_dist-$（窗口）；
如果（面差异<200和面差异>=0）{
如果（活动==0）{
主动=1；
show_sch（）；
}
}
if（$（'.face_content'）.hasClass（'showing'））{
如果（面_差<-200）{
如果（活动==0）{
主动=1；
隐藏_sch（）；
}
}
}
});
函数show_sch（）{
$（'.face_content img'）。设置动画({
“不透明度”：1，
“右”：0
}，1000，函数（）{
$（'.face_content'）.addClass（'showing'）；
活动=0；
});
$（'.face_text ul'）。设置动画({
“不透明度”：1，
“左”：0
}，1000，函数（）{
活动=0；
});
}
函数hide_sch（）{
$（'.face_content img'）。设置动画({
“不透明度”：0，
“对”：80
}，1000，函数（）{
活动=0；
});
$（'.face_text ul'）。设置动画({
“不透明度”：0，
左：80
}，1000，函数（）{
活动=0；
});
}

这里有一些文字

哦，你编辑了这篇文章，哈哈……我本来想说不工作，但现在我又试了一次，正在运行！！！都是关于你添加的变量（活动的）！！