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

Question

我想动画divs。这个想法是，当客户滚动直到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> 

然后我想这个JavaScript与jQuery

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>