jQueryの問題fadeInの効果

画像1,2,3がある画像のフェーディンエフェクトを実装しようとしています。シーケンスをフェードインすると、フェードイン効果が働きます。画像リンクを逆方向にクリックすると、サンプル画像3、画像2の順に表示されます。フェードイン効果は表示されません。私がここで何をしたのか分からない。高度でjQueryの問題fadeInの効果

<html> 
    <head> 
     <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script> 
     <style type="text/css"> 
      #wrapper{ 
       width:400px; 
       height:300px; 
      } 

      .picture{ 
       width:400px; 
       height:300px; 
       position:absolute; 
      } 

      .button{ 
       background-color:red; 
       width:300px; 
       height:200px; 
      } 


     </style>  
     <script type="text/javascript">   
      function switchPicture(id){ 
       visible_image_id = jQuery("img:visible").attr("id"); 

       jQuery("#image_"+id).fadeIn(500,function(){ 
        console.log("visible -" + visible_image_id); 
        jQuery("#"+visible_image_id).hide(); 
       });    
      } 
     </script> 
    </head> 
    <body> 
     <div id='wrapper'> 
      <img id='image_1' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/lion__11.jpg"> 
      <img id='image_2' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/before_the_fall__39.jpg">         
      <img id='image_3' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/hot_august__97.jpg">             
     </div> 
     <div> 
      <a href="javascript:switchPicture(1);">Picture 1</a> 
      <a href="javascript:switchPicture(2);">Picture 2</a>    
      <a href="javascript:switchPicture(3);">Picture 3</a>       
     </div> 

    </body> 
</html>

ありがとう：

は、ここでは、コードです。

出典

2011-08-03 TonyTakeshi

あなたが既にそこにあるbajillion jQueryプラグインの1つを使用していない特定の理由はありますか？ –

私はこれをカスタム目的のためにビルドし、最初からビルドする方が速いと判断しましたが、この問題は解決しませんでした。 – TonyTakeshi

あなたが停止してトラブルシューティングをしなければならないときは、それほど速くないと思います。 – Sparky

あなたはZインデックスの問題があります。問題は、あなたが言うならば、画像2がすでに表示されている画像2を表示していることです。画像3は画像2の前にありますので、画像3は表示されません。 3は、フェードが完了するまで隠されません。イメージのZ-インデックスを設定することでこれを修正できます。

function switchPicture(id) { 
    visible_image_id = jQuery("img:visible").css("zIndex", 0).attr("id"); 

    jQuery("#image_" + id).fadeIn(500, function() { 
     console.log("visible -" + visible_image_id); 
     jQuery("#" + visible_image_id).hide(); 
    }).css("zIndex", 1); 
}

http://jsfiddle.net/7kQWG/

EDIT：いくつかの追加の改善。理想的には、hrefのインラインJavaScriptを取り除き、クリックハンドラで置き換える必要があります。このような何か：また

http://jsfiddle.net/7kQWG/1

注意は、私がif(visible_image_id == new_image_id) return false;を追加しました。これは、可視イメージのリンクをクリックした場合、イメージを完全に隠していたバグを修正します。

追加のボーナスポイントは、hrefをURLなしのjavascriptページに置き換えることができます。そうすれば、ユーザーがJavaScriptを有効にしていないと、そのページに移動しますが、JavaScriptが有効な場合は、意図した動作が行われます。

出典

2011-08-03 03:02:15

私の答えを削除しましたが、これをクリックハンドラに変えてインライン関数の呼び出しを取り除くことができれば本当に甘いでしょう。 – karim79

@kingjiv、これは生命救助者です！私はそれが問題を発注するかもしれないことを遅くそれを考え出した、しかしあなたはそれをとても正確に示した。どうもありがとうございます！ – TonyTakeshi

@ karim79まあまあ、あなたのためだけに！ http://jsfiddle.net/7kQWG/1/同じリンクを2回クリックすることで問題を解決しました。 –

答えて

関連する問題