jQuery.ScrollTo和滾動事件不會corectly工作

Question

我還沒有找到這個問題的任何解決方案，所以我再次問吧，這裏是前面的問題鏈接：jQuery.ScrollTo onAfter settings isn't working correctly

我使用jQuery .ScrollTo腳本可以垂直滾動到選定的圖像或下一個圖像。 （這取決於「演示文稿」類是否附加到我的圖像容器）

要做到這一點，我創建了兩種狀態：「演示模式」和「無演示模式」。

當我們通過將全局類「presentation」添加到我的容器「#galleries」來單擊圖像時，我將激活演示模式。 有了這個「開」的類，我可以確定是否必須顯示當前圖像或滾動到下一個。

對於相當的演示模式，我寫了「$（window）.scroll」函數。當用戶在頁面內滾動時，此功能將退出演示模式。

問題：當我在演示模式期間使用.scrollTo事件時，由於「$（window）.scroll」函數，我總是退出「演示文稿」模式。所以，我有全局變量「presentation_mode_stop_scrolling」來阻止它，但這是行不通的

這是我的問題：一個圖片上點擊事件後，有時，我的類「演示文稿」被我的$窗口）.scroll功能，任何想法???

這裏是演示：http://jsfiddle.net/qnQSP/12/

這裏是我的代碼：

<div id="galleries"> 
    <div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 
    <div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div> 
    <div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 
</div> 

我的腳本

presentation_mode_stop_scrolling = "off"; 

// Calling functions 
$(document).ready(function(){ 


// ADD THE POST ANIMATION ON PICTURE TO CENTER IT IN THE MIDDLE OF THE SCREEN 

    var picture_to_center_class = ""; 
    var picture_to_center = ""; 

    $("#galleries #pictures-content").unbind("click"); 
    $("#galleries #pictures-content").bind("click", function(event) { 

     // Check if we are in the presentation mode 
     var class_galleries = $("#galleries").attr('class'); 
     if(class_galleries == "picture_presentation") 
     { 
     // WE ARE IN THE PRESENTATION MODE 
     // GO TO THE NEXT ONE 
     $("#galleries").addClass('picture_presentation'); 
      console.log("WE ARE IN THE PRESENTATION MODE, GO TO THE NEXT ONE"); 
      var new_picture = parseInt(picture_to_center_class)+1; 

      // Stopping the scroll event to cancelled the presentation mode 
      presentation_mode_stop_scrolling="on"; 

      //scrolling to the next one 
      var picture_to_center = $("#galleries ."+new_picture);  
      $("body").scrollTo(picture_to_center, 800, {onAfter:function(){ 

       console.log("galleries class: "+$("#galleries").attr('class')); 
       presentation_mode_stop_scrolling="off"; 
       return false; 
       console.log("removed class"); 
      }}); 
     } 
     else 
     { 
     // THE PRESENTATION MODE 
     // FOCUS THIS ONE 
      // We are adding the presentation mode to the DOM 
      $("#galleries").addClass("picture_presentation"); 
      console.log("PRESENTATION MODE, FOCUS THIS ONE, ADDING THE PRESENTATION CLASS "); 

      // Get the binding element class number 
      picture_to_center_class = $(this).attr('class'); 
      console.log("picture_to_center: "+picture_to_center_class); 

      picture_to_center = $("#galleries ."+picture_to_center_class); 


      // Stoping the (windows).scroll to removed the galleries class 
      presentation_mode_stop_scrolling="on"; 
      $("body").scrollTo(picture_to_center, 800, {onAfter:function(){ 
       presentation_mode_stop_scrolling="off"; 
       return false; 
       $("#galleries").addClass('picture_presentation'); 
//    console.log("galleries class: "+$("#galleries").attr('class')); 
       } }); 
     } 
     return false; 
    }); 

    // ADD THE FUNCTION TO REMOVE THE USER FROM THE PRESENTATION MODE 
    $(window).scroll(function() { 
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling); 
     if(presentation_mode_stop_scrolling=="off") 
     { 
      $("#galleries").removeClass("picture_presentation"); 
      console.log("THE PRESENTATION MODE HAS BEEN REMOVED"); 
     } 
    }); 


}); 

Answer 1

我相信這是你要找的，結果我已經清理了一下代碼，但想法是一樣的。

http://jsfiddle.net/cf26A/5/

的主要問題是$(window).scroll大火正在執行onAfter功能，這就是爲什麼presentation_mode_stop_scrolling標誌總是被關閉後一次。

我加了一個小小的延遲來處理這個問題，可能不是最佳實踐。應該有辦法阻止$（window）.scroll被觸發。如果有人知道，留下評論，因爲我也想學習。

希望它有幫助。