html5 - JQuery Mobile event on Page Load -


i'm using code animate collapsible content in html5+jqurymobile app...i add head:

$(document).on('expand', '.ui-collapsible', function() {    $(this).children().next().hide();    $(this).children().next().slidedown(500); })  $(document).on('collapse', '.ui-collapsible', function() {    $(this).children().next().slideup(500); }); 

it works fine when click on collapsible head...i'd use collapsible elements in pages i'd have animation automatically after page loaded... 1 can me?!?

working example: http://jsfiddle.net/gajotres/vmzyn/

$(document).on('pageshow', '#index', function(){            $('.ui-collapsible').children().next().hide();     $('.ui-collapsible').children().next().slidedown(1500); }); 

you want use pageshow event. @ point page can animate sliding.

in case want 1 (like document ready) use syntax instead:

$(document).on('pageinit', '#index', function(){            $('.ui-collapsible').children().next().hide();     $('.ui-collapsible').children().next().slidedown(1500); }); 

unlike pageshow, pageinit trigger once.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -