ベネズエラ出身で、英語が下手で申し訳ありません。私の質問は次のとおりです。jqueryでアニメーション化するヘッダーメニューを使用してjqueryモバイルアプリケーションを開発しています。プロジェクトは、多くの「ページ」コンテナを含む単一ページのHTMLドキュメントであり、最初の読み込みでは正常に動作しますが、$.mobile.changePage()でページを変更するとメニューの動作が間違っています。
ヘッダー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>
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);
});