SIMPLE Pulsating Effect with jQuery on phonegap 3.3?

Question

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!

Answer 1

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