-2 
$(document).ready(function(){

    $('#li1').mouseover(function(){

        $(".over2").slideDown("slow");
        $(".over").hide();
    });
    $('#li1').mouseout(function(){

        $(".over2").slideUp("fast");
        $(".over").show();
    });
});

これのhtmlはここにあります!!

<li id="li1" class="news_tabs">
   <img src="Images/images.jpg" height="290" width="200" />
   <div class="over">
      <h5>The blackberry Launched in</h5>
   </div>
   <div id="over2" class="over2">
      <p>The total discription The total discription The
        total discription The total
        discription The total discription </p>
   </div>
</li>

<li class="news_tabs"> this is two</li>
<li class="news_tabs">this is three</li>
<li class="news_tabs"> this is four</li>

画像があります。私がやりたいのは、ユーザーが画像にマウスを合わせると、見出しが非表示になり、短い説明が上からスライドし、マウスが外れると、再び見出しが表示され、説明が上にスライドします。しかし、ここでマウスが下にスライドしたディスクリプションの上にあると、マウスが出るまでディスクリプションが上下に何度もスライドします...助けてください

このコードで制御不能に上下にスライドするのを止める方法は?

4

2 に答える 2

0

あなたのHTMLやデモを見ることができないので、これで解決できるとは確信していませんが、通常、あなたが説明する結果はmouseover/mouseoutではなくmouseenter/を使用することによって引き起こされますmouseleave。

これを試して。

$(document).ready(function() {

    $('#li1').mouseenter(function() {
        $(".over2").slideDown("slow");
        $(".over").hide();
    });
    $('#li1').mouseleave(function() {
        $(".over2").slideUp("fast");
        $(".over").show();
    });

});

また、省略形では.hover()...を使用します。

$(document).ready(function() {

    $('#li1').hover(
        function() {
            $(".over2").slideDown("slow");
            $(".over").hide();
        },
        function() {
            $(".over2").slideUp("fast");
            $(".over").show();
        }
    );

});
于 2012-06-28T21:39:36.543 に答える
0

どうぞ：
これは、li必要な要素の数に対して機能します

jsFiddle デモ

$(document).ready(function(){

  $('ul.news_tabs li').hover(function(){
    $(this).find('.over').stop().fadeTo(300,0);
    $(this).find('.over2').stop().slideDown();
  },function(){
    $(this).find('.over').stop().fadeTo(300,1);
    $(this).find('.over2').stop().slideUp();    
  });
  
});

私はあなたの HTML も変更しました。あなたがすべてliの要素に別のID. そうしないでください。好きなこと：

<ul class="news_tabs">    
    <li>
       <img src="Images/images.jpg" height="290" width="200" />
       <div class="over">
          <h5>1 The blackberry Launched in</h5>
       </div>
       <div class="over2">
          <p>The total discription The total discription The
            total discription The total
            discription The total discription </p>
       </div>
    </li>


    <li>2</li>
    <li>3</li>
    <li>4</li>


</ul>
于 2012-06-28T21:50:32.787 に答える