jQuery.ScrollTo和scroll事件无法正常工作

Question

I haven't find any solution for this question so I'm asking it again, here is the previous question link: jQuery.ScrollTo onAfter settings isn't working correctly

I'm using the jQuery.ScrollTo script to be able to vertically scroll to the selected image or to the next image. (This depend if the "presentation" class is attach to my images container)

To do it, I have created two states:"the presentation mode" and the "no presentation mode".

I'm activate the presentation mode when we are clicking on an image by adding the global class "presentation" to my container "#galleries". With this class "on", I can determine if I have to display the current image or scroll to the next one.

To quite the presentation mode, I wrote the "$(window).scroll" function. This function is quitting the presentation mode when the user is scrolling inside the page.

Problem: when I was using the .scrollTo event during the presentation mode, I was always quitting the "presentation" mode because of the "$(window).scroll" function. So, I had the global variable "presentation_mode_stop_scrolling" to stop it, but this isn't working

Here is my problem: After a click event on a picture, sometime, my class "presentation" is removed by my $(window).scroll function, any ideas???

Here is Demo: http://jsfiddle.net/qnQSP/12/

Here is my code:

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

My script

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

I believe this is the result you are looking for, I have cleaned up the code a bit but the idea is the same.

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

The main problem is $(window).scroll fires once after onAfter function being executed, that's why the presentation_mode_stop_scrolling flag is always being turned off.

I added a tiny delay to deal with this problem, probably not the best practice. There should be a way to stop $(window).scroll being fired. If anyone knows, leave a comment as I would like to learn as well.

Hope it helps.