Question

我正在尝试动画div。这个想法是当客户滚动到div时它变得动画了......如果客户滚动回到页面顶部，则div运行与第一个动画相反的动作（如淡入/淡出）

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

这是我的代码：

<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>

Jquery动画，如果条件执行相反的动作

1 个答案: