-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 回答