Jqueryのアニメーションは、条件が反対の場合に実行します。

Question

divをアニメーション化しようとしています。考え方は、顧客がdivまでスクロールしてアニメーション化すると、顧客がページの上部にスクロールするとdivが最初のアニメーションと反対のアクション（フェードイン/アウトなど）を実行するということです。

最初のアニメーションの後で、2番目のアニメーションは実行されません。

は、これは私のコードです：

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

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

任意のアイデアでこのJavaScriptをしようとしていますか？

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>