0

我有一个可拖动的元素，我试图通过将其动画到左侧：100%，如果它离屏幕右边缘 60%，则使其在屏幕外完成。意思是 40% 或更少是可见的。

我知道用于检测是否隐藏 60% 或更少的 if 条件正在工作，因为其中发生了警报。

但是，我对仅执行 jQuery 动画的自定义函数的调用不会发生。

这是一个重现我的问题的 JS Fiddle：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%'});
}
4

1 回答 1

1

Pep 使用 jQueryanimate在拖动元素时更改元素的位置。当您调用时slideLeft，您仍在拖动它，因此 Pep'sanimate()将继续启动并覆盖animate调用slideLeft。

解决方案是在您调用 后停止 Pep slideLeft。查看 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);
}

这是小提琴。

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

于 2013-06-17T16:09:14.870 回答