Question

我有一个可拖动的元素，我试图让它在屏幕外完成，通过动画将其设置为左：100％，如果它是屏幕右边缘的60％。含义40％或更少是可见的。

我知道我是否有条件检测是否隐藏了60％或更少，因为它内部发出警报。

但是，我调用只执行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%'});
}

Answer 1

Pep使用jQuery animate来改变元素被拖动时的位置。当您拨打slideLeft时，您仍在拖动它，因此Pep的animate()会继续推进并覆盖animate中的slideLeft来电。

解决方法是在致电slideLeft后停止Pep。查看Pep的文档，您可以在致电stopEvent时设置.pep()属性，然后在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);
}

Here's the Fiddle.

Pep.js文档：https://github.com/briangonzalez/jquery.pep.js/

动画向左：如果可拖动元素在屏幕上有60％的折扣，则为100％

1 个答案:

Here's the Fiddle.