0

ホバーイベントでjqueryスライドを作成しました。ページの下部には、マウスが要素の上に置かれると展開するスライダー要素があります。機能が存在することをユーザーに思い出させるために、要素の上部に突き出たタブがあります。このタブは私に多くの問題を引き起こしています。タブの上にカーソルを合わせると、要素が繰り返し伸縮します。CSS を編集してみましたが、margin-top を削除すると正しく機能しましたが、これは意図したデザインではありません。これを解決するために DIV を追加しようとしましたが、うまくいきませんでした。タブが正しく機能するように手伝ってもらえますか?

JQuery 1.5.1 を使用しています

HTMLは次のとおりです。

<body>   
  <div class="Livwidget">
  <div class="tab"></div>
   </div>
</body>

CSSは次のとおりです。

.Livwidget{
  background: #000;
  bottom: 0;
  left: 0;
  margin-left: 5%;
  margin-right: 5%;
  padding-top: 3px;
  position: fixed;
  width: 90%;
 }


 .tab{
  background: #000;
  height: 30px;
  margin-left: 0;
  margin-top: -30px;
  width: 135px;
 }

JS は次のとおりです。

<script> 
    $(document).ready(function(){
        $(".Livwidget").hover(makeTall,makeShort);
    }); // close document.ready

    function makeTall(){  $(this).animate({"height":250},350);}
    function makeShort(){ $(this).animate({"height":5},350);}
</script>

どんな助けでも本当に感謝します。これを修正するために何時間も遊んでいますが、理解できないようです。

4

2 に答える 2

1

と呼ばれる変数の if/else ステートメントを追加します。これはスクリプトの外部var activeAnimationとして宣言する必要があります。次に、アニメーション セットが開始されるとすぐに、アニメーション セットが開始されるとすぐにアニメーションを許可し、アニメーションの最後にコールバックを含めるようにします。作る関数00activeAnimation = 1activeAnimation = 0

于 2011-06-09T14:10:44.360 に答える
0

これを試してくださいhttp://jsfiddle.net/Qsqrc/

于 2011-06-09T14:32:06.880 に答える