javascript - Replace element on click -

when developing apps android through phonegap using html there noticeable flicker when switching pages. caused loading in new html file.

can avoided replacing element on click , having fade in?

i don't mind using javascript or jquery can't seem find way using html , css.

i'm creating childrens interactive story/book. clicking goback or goforth buttons load in new content, without effecting buttons.

it's best understand causing flicker, since you've given no information go on, there's not can that.

it's pretty easy replace element plain javascript:

function replaceelem(origelem, newelem) {     var parent = origelem.parentnode;     parent.insertbefore(newelem, origelem);     parent.removechild(origelem); } 

if want fade new element in, can css transition or library supports animations.

if want new element fadein on top of old element, have play games overlapping objects , positioning , remove old element after new element faded in. doable, not simple replacing 1 element other.

---

one simpler way have both sets of html in original page:

<div id="page1" class="page">     <div>other html here</div> </div> <div id="page2" class="page" style="display: none;">     <div>other html here</div> </div> 

and, can hide show particular page this:

function showpage(id) {     // hide pages     var pages = document.queryselectall(".page");     (var = 0; < pages.length; i++) {         pages.style.display = "none";     }     // show 1 particular page     document.getelementbyid(id).style.display = "block"; }  // show page 2 showpage("page2");