0

だから私は次のようないくつかのjavascriptを持っています:

var headshot = {
  enter: function(e) {
    $(e.target).find('.overlay').slideDown();
  },

  exit: function(e) {
    $(e.target).find('.overlay').slideUp();
  }
}
····
$(function() {
  $('.headshot').hover(headshot.enter, headshot.exit);
});

そして、次のような html(haml):

.board-row
  .headshot
    .overlay
      blahblah
      %br
      Chief Javascript Architect
  .headshot
    .overlay
      blah
      %br
      Liason
  .headshot
    .overlay
      etc
      %br
      Kati Roll Advocate
  .headshot
    .overlay
      blah
      %br
      Javascript Developer

次のような小さな CSS を使用します。

  .board-container {
    margin-top: 60px;
    padding: 0;
  }
··
  .board-row {
    padding: 0;
    width: 100%;
    height: 200px;
    }

  .headshot {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 24%;
  }

  .overlay {
    width: 24%;
    height: 50%;
    opacity: 0.3;
    background: black;
    position: absolute;
    display: none;
    color: white;
  }

JavaScript を他のすべてのものと組み合わせて使用​​すると、HTML 内のテキストを含むヘッドショットの上に不透明な div が表示される素敵なスライド アニメーションが作成されると考えました。画像にカーソルを合わせると、実際にそれが起こります (オーバーレイの CSS の幅と高さをそれぞれ 24% と 50% に設定する必要がある理由はわかりませんが、幅と高さが100% に設定した場合のヘッドショットの親要素)。ただし、ヘッドショットから離れたり、別のヘッドショットにカーソルを合わせたりすると、exit 関数にもかかわらずオーバーレイが貼り付いたままになります。何を与える？ときどき 1 つが滑り落ちることがありますが、それは規則ではなく例外です...

4

1 に答える 1

0

exit 関数では、e.target が「overlay」クラス自体で div をキャッチすることがあるため、コードは次のようになります。

$(e.target).find('.overlay')

何も返しません。

exit 関数を次のように修正します。

exit: function(e) {
    $(e.currentTarget).slideUp();
  }

ここに良い説明があります - e.target と e.currentTarget の違い

于 2013-10-13T22:41:51.267 に答える