Question

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

我终于设法让代码在jsfiddle上或在ripple模拟器中工作，但是当我尝试在设备上测试它时，它们都搞砸了。没有脉动效果出现或出现，但不会出现在cs中提到的0.5s间隔或它随机闪烁或淡出但不完全，只有一半......它就像效果发生但非常快或与之相矛盾类似的效果...但我尝试从该页面删除所有内容，但仍然没有运气......

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

更新：

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

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

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-in-jquery-mobile/

您不需要在设备准备函数中链接页面事件函数。

此外，即使按下重置按钮后，进度条仍继续脉冲，所以我添加了此功能以在重置时取消脉冲动画：

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

使用jQuery在phonegap 3.3上简单的脉动效果？

1 个答案: