向左移动:如果可拖动元素离屏幕60%，则为100%

Animate to left:100% if draggable element is 60% off screen

本文关键字：屏幕 100% 则为 元素 拖动 移动 左移 如果      更新时间：2023-09-26

我有一个可拖动的元素，我试图使它在屏幕外完成，通过将它动画到左边: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/

相关文章：