buggy JQuery悬停动画

Question

我想创建的是类似于this的东西。当鼠标悬停时，应该会有一个向下滑动的信息(就像示例中当鼠标悬停在img上时一样)。我有的是this。问题是，当指针位于一个子元素(<a>或<p>)上时，信息框会上下跳动。

html：

  <ul>
   <li>
   <div id="box_1" class="prevw_box">
     <div id="box_1-rep" class=" box-rep text1"><h3>CONDUCTIVE GRID TAPE</h3>
    <p class="p1">A lot of text ......a lot of text</p>

     <a class="see_product" href="#"></a>

     </div>

    </div>
   </li>

  </ul>

css：

    .box-rep {
     position:absolute;
     top:-220px;
     left:0;
     width:238px;
     height:440px;
     background-color:#887455; }

   .prevw_box {
      position:relative;
      float:left;
      width:238px;
      height:220px;
      overflow:hidden;} 

当然，jQuery代码是：

  $('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

在过去的几天里，我一直在努力解决这个问题，但我再也受不了了。我需要这个想法，另一种解决方案。

感谢您的快速回答！因为这件事，我最近很沮丧。有这么多的变体，我尝试了，我一遍又一遍地重做了代码。问题解决了！再次感谢！

Answer 1

尝试使用mouseenter和mouseleave，而不是mouseover和mouseout。

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseenter(function(){
$(this).stop().animate(
    {top:"0px",opacity:"0.8"},{duration:250})
    //$(this).stop()
})

.mouseleave(function(){
$(this).animate(
    {top:"-220px",opacity:"0.0"},{duration:250})
})

Answer 2

您的.mouseover方法看起来不错，但是您可能还应该在.mouseout method中添加一个.stop()，这样您的代码将如下所示：

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).stop().animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

尝试并更新您的测试url

Answer 3

我会这样做：

$('#nav_bar li').css('backgroundPosition', '-224px 0').on({
    mouseenter: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-20px 0px)"}, 250);
    },
    mouseleave: function() {
        $(this).stop(true,true).animate({backgroundPosition:"(-224px 0px)"}, 250);
   }
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on({
    mouseenter: function() {
        $(this).stop(true, true).animate({top:"0px",opacity:"0.8"},250);
    },
    mouseleave: function() {
        $(this).stop(true, true).animate({top:"-220px",opacity:"0.0"},250);
    }
});

| ​

缩短的版本将如下所示：

$('#nav_bar li').css('backgroundPosition', '-224px 0').on('mouseenter mouseleave', function(e) {
    $(this).stop(true,true).animate({backgroundPosition:"(-"+(e.type=='mouseenter'?20:224)+"px 0px)"}, 250);
});

$('.box-rep').css({top:"-220px",opacity:"0.0"}).on('mouseenter mouseleave', function(e) {
    var state = e.type=='mouseenter';
    $(this).stop(true, true).animate({top: (state?0:-220),opacity:state?0.8:0},250);
});