jQuery在phonegap 3.3上的简单脉动效果? [英] SIMPLE Pulsating Effect with jQuery on phonegap 3.3?

问题描述

我正在尝试创建一个应用程序，当滑块低于20％时，进度条上的.progress会跳动，而滑块值为0％时，整个.progressBar都应跳动. >

我终于设法使代码在jsfiddle上的Web上或在涟漪模拟器中工作，但是当我尝试在设备上对其进行测试时，一切都搞砸了.没有出现脉动效果，或者没有出现，但没有在CSS中提到，而是以0.5s的间隔出现，或者它随机闪烁，或者淡出但没有完全消失，只有一半...它的效果是发生的，但是非常快或者与之矛盾.类似的效果...但是我尝试删除该页面上的所有内容，但还是没有运气...

是否可以使其在移动设备上也可以工作?

更新:

具有脉动效果，因为我试图将脉动效果添加到页面上的所有元素:进度条，frame div，3个按钮和滑块，效果非常有趣:框，progressBar和这3个按钮中的2个并没有真正跳动，只是闪烁.另一个按钮什么也没做，甚至没有闪烁，并且底部的滑块正确跳动(从0到100％的不透明度以及500ms的延迟).为什么其他div不跳动?位置(固定的，绝对的，相对的)有东西吗?有没有办法解决这个问题或者是一个错误?这一切都发生在电话上.在小提琴或涟漪模拟器上，它可以正常工作！为什么?

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

解决方案

好，我已经在我的设备上测试了该应用程序和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});  
}

I'm trying to create an app which on the second page when the slider is below 20% the .progress from the progress bar is pulsating and when the slider is 0% the whole .progressBar should pulsate.

I finally managed to make the code work on web on jsfiddle or in the ripple emulator but when I try to test it on the device it's all messed up. No pulsating effect appears or it appears but not in 0.5s interval as mentioned in the css or it flickers randomly or it fades out but not fully, just half of it....its like the effect happens but very fast or in contradiction to a similar effect... But I tried removing all the content from that page and still no luck...

Is it possible to make it work also on the mobile device?

UPDATE:

It's something with the pulsating effect because I tried to add the pulsating effect to all the elements on the page: the progress bar, the frame div, and to the 3 buttons and to the slider and the effect was very interesting: The frame, the progressBar and 2 of those 3 buttons were not really pulsating, just flickering. The other button wasn't doing anything, not even flickering, and the slider from the bottom was pulsating correctly (from 0 to 100% opacity and with 500ms delay).. What's the thing here? Why aren't other divs pulsating? Has it something with the position (fixed, absolute, relative)?? Is there a way to fix this or it's a bug? This all happens on the phone. On fiddle or on ripple emulator it works as it should! Why?

Could somebody please take a look at it... I'm having this problem for a few days so far and I cannot pass it. Thank you very much!

解决方案

Ok I have tested out the app and the jsFiddle on my device and got it working. By comparing the jsFiddle and your app in developer tools I identified certain differences in the CSS styling. Try adding a few lines to your CSS for .progress. Check this out:

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

It is pulsing on my phone now. Try it out and let me know!

Also, check out this link that describes the page event order in jQuery Mobile.
http://www.gajotres.net/page-events-order-in-jquery-mobile/

You do not need to chain nest the page event functions inside the deviceready function.

Also, the progress bar continues to pulse even after I press the reset button, so I added this function to cancel the pulse animation on reset:

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上的简单脉动效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！