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方法看起来不错，但您可能应该向.stop()添加.mouseout method，因此您的代码将如下所示：

$('.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})
})

尝试并更新您的测试网址

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);
    }
});

DEMONSTRATION | CODE

缩短的版本如下所示：

$('#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);
});

FIDDLE

Answer 4

只需在stop()中添加mouseout来电，就像魅力一样。

jsFiddle here

Answer 5

只需使用 jquery.hover 代替mouseover和mouseout - http://api.jquery.com/hover/

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

JsFiddle ：http://jsfiddle.net/HDUVK/

Answer 6

以这种方式使用：

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

小提琴在这里：http://jsfiddle.net/Gbqpv/

buggy JQuery悬停动画

6 个答案: