私は次のスクリプトを理解できません

Question

私はjQueryを初めて使ったので、私のプロジェクトに役立つこのスクリプトを見つけました。私は容器の中でイメージを消したい。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#collage-container img").mouseover(function(){ 
      $("#collage-container img").css("z-index",1); 
      $(this).css("z-index",999); 
     $(this).fadeOut(100,function(){ $(this).fadeIn(1000); }); 
     }); 
    }); 
</script> 

4行目と5行目は分かりにくいですか？5行目は画像ですか？

Answer 1

4行目は、z-indexプロパティーを設定します。これはレイヤーと関連しています。 zインデックスが高いレイヤーは、zインデックスの低いレイヤーに流れます。 z-index 1は低い値なので、画像が背中に押し込まれていると推測しています。しかし、私はまた、ライン5のthisが同じ要素を参照していると考えているので、すぐに999のz-インデックスが割り当てられます（これはかなり高いです）。

少し触れているようですが、いくつかのバグの回避策かもしれません。

Answer 2

LINE4 1.
LINE5にマッチ画像#collage-container imgのz屈折率の設定：は#collage-container imgこの場合に意味この。 Z-インデックスを999に設定します。

この行はmouseover関数の一部です。

Answer 3

まず、3行目を見てください。「マウスがコラージュの画像の上にくると、その機能は実行されます。

行4,5,6は関数内にあり、関数内にはthisがあります。この関数は、関数をトリガした要素（この場合は画像）の関数参照元です。 5行目に、画像を前面に表示するZ-インデックスを999に設定します。

Answer 4

コールバック関数の$(this)は$("#collage-container img")であり、以下のようにコードを書き換えることができます。ちなみに、line4には意味がありません。z-indexを1に設定しますが、5行目はZ-indexを999に設定します。

$(document).ready(function() { 
     $("#collage-container img").mouseover(function() { 
      $(this).css("z-index", 999).fadeOut(100, function() { 
       $(this).fadeIn(1000); 
      }); 
     }); 
    });