JavascriptはFirefoxとIEでは動作しますがChromeでは動作しません

Question

一度に表示するコンテンツが多すぎると思ったWebページがありましたので、必要になるまでたくさんの画像を隠すJavaScriptを書きました。そのページの一番下には、「スクリーンショットはここをクリックしてください！」というリンクがあります。クリックすると、JSには、すべてのスクリーンショットが含まれている隠れたスパンが表示されます。リンクテキストが「スクリーンショットを非表示にするにはここをクリック」に変更されます。これはIEとFirefoxで動作しますが、何らかの理由でChromeにはありません（クロムでは、非表示にする前に非表示リンクを3回クリックする必要があります）。コードはかなりシンプルですが、何が間違っているのかわかりません。何か案は？

JS：

$('#show').click(function(){ 
$('#Screenies').show('slow'); 
$('#show').hide(); 
$('#hide').show(); 
}); 

$('#hide').click(function(){ 
$('#Screenies').hide('slow'); 
$('#hide').hide(); 
$('#show').show(); 
}); 

HTML：

<p id="show" style="cursor:pointer; color:Navy"><u>Click here for sceenshots!</u></p> 
<p id="hide" style="cursor:pointer; color:Navy"><u>Hide sceenshots</u></p> 
<span id="Screenies"> 
     [Image links in here] 
</span> 

編集： は、私はこれは、あなたがアニメーション化されているという事実に関係してい

Answer 1

jQueryの1.6を使用しています言及を忘れましたスパン要素 - なぜ私に尋ねないでください。しかし、セマンティックマークアップを使用している場合は、実際に画像を保持するdivを使用する必要があります。私はあなたのコードも再考しました。だから、あなたは1つのリンクしか必要としません。

$('#show').toggle(function(){ 
    $('#Screenies').show('slow'); 
    $('#show').text('Hide'); 
}, function(){ 
    $('#Screenies').hide('slow'); 
    $('#show').text('Show'); 
}); 

あなたはjQueryのトグル機能read this articleについて知らない場合は、コードの残りの部分は、単純に要素をアニメーション化し、現在の状態に基づいて、リンクテキストを変更します。

Answer 2

Chromeは、コード実行時に要素を見つけることができない可能性があります。次のように、このコードをdocument.readyイベントにラップすることをお勧めします。

$(document).ready(function() { 
$('#show').click(function(){ 
$('#Screenies').show('slow'); 
$('#show').hide(); 
$('#hide').show(); 
}); 

$('#hide').click(function(){ 
$('#Screenies').hide('slow'); 
$('#hide').hide(); 
$('#show').show(); 
}); 
}); 

これは私のためのトリックでした。