CODEWITHSUNDEEP
jqueryjquery-mobile
JavaCake
JavaCake

Reputation: 4115

Unable to animate jQuery Mobile button element

I am trying to make a simple fadeIn and fadeOut on a jQuery Mobile button, but it does not seem to work?

The example is on jsfiddle: http://jsfiddle.net/NXRBc/

JS:

function blinking(elm) {
    setInterval(blink, 10);
    function blink() {
        elm.fadeOut(100, function() {
           elm.fadeIn(100);
        });
    }
}

blinking($("#ONEButton"));

HTML:

<div data-role="content">
    <div class="ui-grid-b" data-position="fixed">
            <div class="ui-block-a"><button id="ONEButton" type="v" data-theme="d">ONE</button></div>
            <div class="ui-block-b"><button type="v" data-theme="d">TWO</button></div>
            <div class="ui-block-c"><button type="v" data-theme="d">THREE</button></div>
        </div>
</div>

Upvotes: 2

Views: 708

Answers (2)

user2421312
user2421312

Reputation: 1

First, if you just call the method, it will start blinking justs as the document loads. And also, if you refer to the div class instead, it will work.

         $(".ui-block-a").click(function(){
            var $this = $(this);
            blinking($this );
         });

Upvotes: 0

Ram
Ram

Reputation: 144689

jQuery mobile wraps the button elements with dynamically generated elements and hides the buttons, select the closest wrapper div element instead:

blinking($("#ONEButton").closest('div.ui-block-a'));

Or:

blinking($('div.ui-block-a'));

http://jsfiddle.net/V3dmp/

Upvotes: 2

Related Questions