我有一个可拖动的元素,我试图使它在屏幕外完成,通过将它动画到左边:100%,如果它是屏幕右边缘的60%。这意味着40%或更少的可见
我知道检测60%或更少隐藏的if条件正在工作,因为它内部会发生警报。
然而,我调用一个自定义函数,只做jQuery动画不会发生。
这是一个JS提琴,重新创建我的问题:http://jsfiddle.net/bccQh/1/
如果你把元素拖到右边,它会淡出。这证明了handleOpacity()
自定义函数是有效的。用于检测元素是否在屏幕外60%或更多的if条件起作用,因为当条件为真时,当前被注释掉的警报将触发。但是第二个自定义函数slideLeft()
的调用没有发生,它就在警报之后。
任何想法为什么自定义函数不发生,我怎么能让它发生?
下面是我的代码:$('#tabViewWindow').pep({
axis:'x',
useCSSTranslation:false,
drag:function(ev, obj){
if(obj.dx>0 && obj.$el.offset().left>=$(window).width()*0.6){
slideLeft(ev, obj);
}
handleOpacity(ev, obj);
},
});
function handleOpacity(ev, obj){
var opacity = 1 - (parseInt(obj.$el.css('left'))/$(window).width());
obj.$el.css('opacity', opacity);
}
function slideLeft(ev, obj){
obj.$el.animate({left:'100%'});
}
Pep使用jQuery animate
来改变元素被拖动时的位置。当你调用slideLeft
时,你仍然在拖拽它,所以Pep的animate()
将继续启动并覆盖slideLeft
中的animate
调用。
解决方案是在调用slideLeft
后停止Pep。查看Pep的文档,您可以在调用.pep()
时设置stopEvent
属性,然后在slideLeft
中触发它。像这样:
$('#tabViewWindow').pep({
axis:'x',
useCSSTranslation:false,
stopEvents: "stopPep", // <---- Stop when we get a "stopPep" event
drag:function(ev, obj){
if(obj.dx>0 && obj.$el.offset().left>=$(window).width()*0.6){
slideLeft(ev, obj);
}
handleOpacity(ev, obj);
},
});
function slideLeft(ev, obj){
obj.$el.trigger("stopPep"); // <---- Tell Pep to stop here!
obj.$el.stop().animate({left:"100%"});
}
function handleOpacity(ev, obj){
var opacity = 1 - (parseInt(obj.$el.css('left'))/$(window).width());
obj.$el.css('opacity', opacity);
}
小提琴来了。
Pep.js docs here: https://github.com/briangonzalez/jquery.pep.js/