与PhoneGap 3.3的jQuery进行简单的脉动效果

Question

我正在尝试创建一个应用程序，在第二页上，当滑块低于20％时，来自进度栏的.progress是脉动的，当滑块为0％时，整个.progressBar应脉冲。

我终于设法使代码在JSFiddle或Ripple模拟器上在Web上工作，但是当我尝试在设备上对其进行测试时，它都弄乱了。没有出现脉动效果或出现的脉动效果，但不显示为0.5s的间隔，如CSS中所述，或者它随机闪烁或它褪色，但并非完全，仅一半。类似的效果...但是我尝试从该页面上删除所有内容，但仍然没有运气...

是否有可能在移动设备上也可以使用它？

更新：

这是具有脉动效果的东西，因为我试图将脉动效应添加到页面上的所有元素：进度栏，框架div和3个按钮以及滑块，效果非常有趣：框架，这3个按钮中的progressBar和2并不是真正的脉动，只是闪烁。另一个按钮没有做任何事情，甚至没有闪烁，底部的滑块正确脉动（从0到100％的不透明度和500ms的延迟）..这里是什么？为什么没有其他分裂？有什么位置（固定，绝对，相对）的东西吗？有没有办法解决此问题或是错误？这一切都发生在电话上。在小提琴或在波纹模拟器上它可以按照应有的效果进行工作！为什么？

有人可以看看它...到目前为止，我已经有几天了这个问题，我无法通过。非常感谢！

Answer 1

好吧，我已经测试了该应用程序和设备上的JSFIDDLE并使其正常工作。通过比较开发人员工具中的JSFiddle和您的应用程序，我确定了CSS样式中的某些差异。尝试在.progress的CSS中添加几行。检查一下：

.progress {
    position: absolute;
    box-sizing: border-box;
    box-shadow: inset 0px 0 5px 0 #777;
    -webkit-box-shadow: inset 0px 0 5px 0 #777;
    right: 0px;
    height: 100%;
/*     margin-top: 0px; */
    background-color: orange; 
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;   
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-duration: 0.5s; /* for Safari */
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease-in-out, ease-in-out;
    transition-property: width, background;
    transition-timing-function: ease-in-out, ease-in-out;
    -webkit-transform: translateZ(0);
}

现在在我的手机上脉动。尝试一下，让我知道！

另外，请查看此链接，该链接描述了jQuery Mobile中的页面事件订单。
http://www.gajotres.net/page-events-order-ender-in-jquery-mobile/

您不需要将页面事件函数链接在deviceready函数中。

另外，即使在我按重置按钮之后，进度栏仍会继续脉冲，因此我添加了此功能以取消重置上的脉冲动画：

function cancelPulse(element) { 
    $(element || this).stop(true, false);
    var color = GetColorForVal(100);
    $("#slider .progress").css({"background": color, "width": (100) + "%", "opacity": 1});  
}