jQuery.ScrollTo和scroll event不能正常工作
jQuery.ScrollTo and scroll event aren't working corectly
我还没有找到这个问题的任何解决方案,所以我再问一遍,这是上一个问题链接:jQuery。ScrollTo onAfter设置不正确
我正在使用jQuery。ScrollTo脚本能够垂直滚动到所选图像或下一个图像。(这取决于"presentation"类是否附加到我的图像容器)
为此,我创建了两种状态:"呈现模式"answers"无呈现模式"。
当我们点击图像时,我激活了呈现模式,方法是将全局类"presentation"添加到容器"#galleries"中。有了这个类"on",我就可以确定是显示当前图像还是滚动到下一个图像。
为了关闭显示模式,我写了"$(window)"。滚动"功能。当用户在页面内滚动时,此函数退出显示模式。
问题:当我在演示模式中使用。scrollto事件时,由于"$(window)",我总是退出"presentation"模式。滚动"功能。所以,我有全局变量"presentation_mode_stop_scrolling"来阻止它,但这不起作用
这是我的问题:在图片上的点击事件之后,有时,我的类"presentation"被我的$(window)删除。滚动功能,有什么想法吗??
这里是Demo: 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");
}
});
});
我相信这是你正在寻找的结果,我已经清理了代码一点,但想法是一样的。
http://jsfiddle.net/cf26A/5/主要问题是$(window).scroll
火灾一旦之后 onAfter
函数被执行,这就是为什么presentation_mode_stop_scrolling
标志总是被关闭。
我添加了一个微小的延迟来处理这个问题,可能不是最佳实践。应该有一个方法来停止$(window)。卷轴被开除了。如果有人知道,请留下评论,因为我也想学习。
希望能有所帮助。
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作