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>