Question

$(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>

有图像，我想做的是 - ＆gt;当用户将鼠标悬停在图像上时，标题会隐藏，并且短描述会从顶部滑动，当鼠标移出时，标题会再次显示，并且说明会向上滑动。但是当鼠标在下滑的描述上时，描述会一次又一次地上下滑动，直到鼠标出来......请帮忙

如何通过此代码无法控制地停止向下滑动？

Answer 1

我无法看到您的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();
        }
    );

});

Answer 2

你走了：
这适用于您想要的li个元素

jsFiddle demo

$(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>

当鼠标悬停在它上面时，这个jQuery代码继续向下滑动并向上滑动“over2”窗格

2 个答案:

jsFiddle demo