0

まず最初に、皆さんに挨拶したいと思います。ここに来られてうれしいです。私はあなたたちから多くのことを読んで学びます。今、私は小さな問題を理解しようとしていますが、答えが得られません。関数行で何を追加または変更できるか、よくわかります。

以下は、私のphpサイトでエラーなしで正常に動作します...

これをヘッダーの行に使用しています：

../jquery-1.8.0.min.js"></script>
../animate-colors-min.js"></script>

これは本文の div です。

<div id="access"></div>

これはCSS行です：

#access {
   background: #31363E;
   display: block;
   width: 50%;
   overflow: hidden;
   height: 22px;
   opacity: 0.8;
}

...そして最後に、アニメーションなどのコード:

$(document).ready(function() {

  $('#access').hover(function() {
    $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).animate({backgroundColor:"#12121c", height:"+=113px"}, 500);
  },this), 1000));
  }, function() {
    clearTimeout($.data(this, "timer"));
    $(this).animate({backgroundColor:"#31363E", height:"-=113px"}, 500);
  });

});

Ok。すでに問題が見えていると思います。カーソルをdivの上に移動し、1秒待ってカーソルをdivから離したくない場合、divは高さを最小化します。それは間違っており、修正する必要があります。

1秒以上待つと、divが展開され、マウスアウト後にデフォルトの高さに戻ります。その通りです。

私は何をすべきか見当もつかないし、それを修正するために他の御馳走でいくつかを見つけることができませんでした.

私の文章を理解していただければ幸いです。

4

1 に答える 1

0

これを行う一種のハックな方法は、divの高さがしきい値を超えている場合にのみ縮小することです。

$(document).ready(function() {

  $('#access').hover(function() {
    $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).animate({backgroundColor:"#12121c", height:"+=113px"}, 500);
  },this), 1000));
  }, function() {
    clearTimeout($.data(this, "timer"));
    if ($(this).height() > 22) {
      $(this).animate({backgroundColor:"#31363E", height:"-=113px"}, 500);
    }
  });

});

ここにJS Fiddleがあります。

それがあなたのニーズを満たしているかどうかはわかりません。

于 2013-04-26T15:12:10.787 に答える