im new in this community, first sorry for my bad english am from venezuela, my question is the follow. Im developing a jquery mobile aplication with a header menu animate whith jquery, the proyect is a single page HTML document contain many "page" container, in the first load works fine, but when change the page with $.mobile.changePage() the menu work wrong.
the header html
<div data-role="header" data-position="fixed" style="text-align:center;">
<div id="navigation">
<div class="home" style="height:100%">
<div class="cls" style="height:100%;"></div>
<div class="cls2" style="height:100%;"></div>
<div class="cls3" style="height:100%;"></div>
<div class="cls4" style="height:100%;"></div>
<div class="cnf" style="height:100%;"></div>
</div>
</div>
<h1 id="title" style="padding:4px;"></h1>
<div id="navigation2">
<div class="home2" style="height:100%">
<div class="home2" style="height:100%">
<div class="img" style="height:95%;"></div>
<div class="cls" style="height:95%;"></div>
<div class="cls2" style="height:95%;"></div>
<div class="cls3" style="height:95%;"></div>
<div class="cls4" style="height:90%;"></div>
</div>
</div>
</div>
</div>
the javascript
$('div.cnf').bind('click',function(e) {
e.preventDefault();
if (click === null) {
$('div.home').stop(true, true).animate({
'marginLeft' : '+=80%'
}, 1000);
click = 1;
}else{
$('div.home').stop(true, true).animate({
'marginLeft' : '-=80%'
}, 1000);
resetmenu();
}
});
$('div.home2').toggle(function(e) {
e.preventDefault();
$(this).stop(true, true).animate({
'marginLeft' : '-=80%'
}, 1000);
}, function() {
$(this).stop(true, true).animate({
'marginLeft' : '+=80%'
}, 1000);
});
