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 ( if the container class "presentation" isn't here) or to the next picture and display it in the middle of the screen.

Note: I have created two states. When the user is clicking on any picture, I'm adding the "presentation" class to the container div off all pictures. So I will know if I have to display the selected image or the next one.

This mode will stop, when the user will scroll inside the page. To do It, I'm using the $(window).scroll event.

Here is my problem: After a click event on a picture, sometime, my class "presentation" is removed by my $(window).scroll event but I don't know how to fix it.

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

What I'm doing: As you can see, I would like to create two states: "the presentation mode" and the "no presentation mode". I'm activate the presentation mode when we are clicking on an item by adding the global class 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 we are scrolling inside the page.

However, when I was using the .scrollTo function during the presentation mode, I was always quitting this mode because of the "$(window).scroll" function. So, I had the global variable "presentation_mode_stop_scrolling" to stop it.

Sometimes the "$(window).scroll" function is called once just after my scrollTo function, can't resolve it.

Here is my code:

HTML:

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

Jquery

$(window).scroll(function () {

  if(presentation_mode_stop_scrolling=="off")
  {
      $("#galleries").removeClass("picture_presentation");
  }

});

    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")
        {
            console.log("Presenation mode");
            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(){ presentation_mode_stop_scrolling="off";      console.log("galleries class: "+$("#galleries").attr('class'));} });
        }
        else
        {
            console.log("Not presenation mode");
            // We are adding the presentation mode to the DOM 
            $("#galleries").addClass("picture_presentation");

            // 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";      console.log("galleries class: "+$("#galleries").attr('class'));} });
         }
    });

来源：https://stackoverflow.com/questions/15501304/jquery-scrollto-onafter-settings-isnt-working-correctly

标签

jquery

scroll