次のことを行う jQuery を含むページがあり、最後のステップで助けが必要です。
このページには div (#"containerSW") が含まれており、ボタン (#"doit") が押されるとコンテンツが前後に切り替わります。
「containerSW」の内容は、画像を含む 2 つの div (「div1」と「div2」) です。これらの画像は、親 div 'containerSW' の代わりにまったく新しい div (#"containerprA") をロードするボタンとして機能します ('div1' の最初の画像の入力を参照)。
「containerprA」の外側をクリックすると、「containerprA」がフェードアウトして「containerSW」に戻るクリック機能を作成しようとしています。以下の mouseup 関数を使用してこれを実行しようとしましたが、「containerSW」をフェードインさせることができません。ページ上での表示が速すぎます。
問題は「containerSW」のchildren divにあると思いますが、解決方法がわかりません..
html:
<input id="doit" type="image" src="Img/array_arrow_rightII.jpg" height=120px width 40px value="clickme">
<div id="containerSW">
<div id="div1">
<img class="SW">
<input id="loadprA" type="image" src="Img/SW_A.jpg" height=125px width 125px >
<img src="Img/SW_B.jpg" height=125px width 125px>
<img src="Img/SW_C.jpg" height=125px width 125px>
<img src="Img/SW_D.jpg" height=125px width 125px>
</div>
<div id="div2">
<img class="SW">
<img src="Img/SW_E.jpg" height=125px width 125px>
<img src="Img/SW_F.jpg" height=125px width 125px>
<img src="Img/SW_G.jpg" height=125px width 125px>
<img src="Img/SW_H.jpg" height=125px width 125px>
</div>
</div>
<div id="containerprA" class="hidden">
<img src="Img/SW_divtester.jpg" height=150px width=400 >
</div>
CSS:
#div1 {
}
#div2 {
display: none;
}
.hidden {
display:none;
background-color:red;
}
#containerprA {
height:400px;
width:800px;
background-color: blue;
}
スクリプト:
$(function () {
var vis = 1;
$('#doit').click(function () {
$('#containerSW').fadeOut('slow', function () {
$('#div'+vis).hide();
vis = vis === 1 ? 2 : 1;
$('#div'+vis).show();
$('#containerSW').fadeIn('slow');
});
})
});
$(function(){
$('#loadprA').click(function(){
$('#containerprA').hide();
$('#containerSW').fadeOut('slow', function() {
$('#containerprA').removeClass('hidden');
$('#containerprA').fadeIn('slow');
});
})
});
$(document).mouseup(function (e)
{
var container = $('#containerprA');
var containerSW = $('#containerSW');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0); // ... nor a descendant of the container
if (!containerSW.is(e.target) // if the target of the click isn't the container...
&& containerSW.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut('slow');
containerSW.fadeIn('slow');
}
});
この最後のステップに関するヘルプは本当に素晴らしいでしょう.!