jquery - 在phonegap 3.3上使用jQuery实现简单的脉动效果？

Question

我正在尝试创建一个应用程序，当 slider 低于 20% 时，第二页上进度条的 .progress 会脉动，而当 slider 为 0% 时，整个 >.progressBar 应该跳动。

我终于设法使代码在 jsfiddle 或ripple模拟器上的网络上工作，但是当我尝试在设备上测试它时，一切都搞砸了。没有出现脉动效果，或者它出现但不是像 css 中提到的那样以 0.5 秒的间隔出现，或者它随机闪烁，或者它淡出但不完全，只有一半......就像效果发生但非常快或矛盾类似的效果...但我尝试删除该页面中的所有内容，但仍然没有成功...

是否可以使其在移动设备上也运行？

更新:

这是带有脉动效果的东西，因为我尝试将脉动效果添加到页面上的所有元素:进度条、框架 div、3 个按钮和 slider ，效果非常有趣:帧中，progressBar 和这 3 个按钮中的 2 个并没有真正跳动，只是闪烁。另一个按钮没有做任何事情，甚至没有闪烁，并且底部的 slider 正确脉动(从 0 到 100% 不透明度，延迟 500 毫秒).. 这里有什么东西？为什么其他 div 没有脉动？它与位置有关吗(固定、绝对、相对)？有没有办法解决这个问题或者这是一个错误？这一切都发生在手机上。在 fiddle 或波纹模拟器上它可以正常工作!为什么？

有人可以看一下吗...我已经遇到这个问题几天了，但我无法通过它。非常感谢!

Answer 1

好的，我已经在我的设备上测试了该应用程序和 jsFiddle 并使其正常工作。通过在开发者工具中比较 jsFiddle 和您的应用程序，我发现了 CSS 样式中的某些差异。尝试在 CSS 中添加几行 .progress。看看这个:

.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-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});  
}