この質問の解決策が見つからないので、もう一度質問します。以前の質問のリンクは次のとおりです: jQuery.ScrollTo onAfter 設定が正しく機能していません
jQuery.ScrollTo スクリプトを使用して、選択した画像または次の画像に垂直方向にスクロールできるようにしています。(これは、「プレゼンテーション」クラスがイメージ コンテナーにアタッチされているかどうかによって異なります)
そのために、「プレゼンテーション モード」と「プレゼンテーションなしモード」の 2 つの状態を作成しました。
コンテナー「#galleries」にグローバル クラス「presentation」を追加して、画像をクリックしているときにプレゼンテーション モードをアクティブにします。このクラスを「オン」にすると、現在の画像を表示する必要があるか、次の画像にスクロールする必要があるかを判断できます。
プレゼンテーション モードを終了するために、"$(window).scroll" 関数を作成しました。この関数は、ユーザーがページ内をスクロールしているときにプレゼンテーション モードを終了します。
問題: プレゼンテーション モードで .scrollTo イベントを使用すると、「$(window).scroll」関数が原因で常に「プレゼンテーション」モードを終了していました。それで、それを止めるためにグローバル変数「presentation_mode_stop_scrolling」がありましたが、これは機能しません
ここに私の問題があります:画像のクリックイベントの後、私のクラスの「プレゼンテーション」が $(window).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");
}
});
});