1

私が作成したいのは、このようなものです。ホバーすると、情報を含むスライドダウンが表示されます（例のように、img にマウスオーバーした場合）。私が持っているのはこれです。問題は、ポインターが子要素 (<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})
})

過去数日間、問題を解決するのに苦労しましたが、もう我慢できません。アイデア、代替ソリューションが必要です。

迅速な回答ありがとうございます。そのせいで最近イライラしてきました。試したバリエーションが非常に多く、コードを何度もやり直しました。問題は解決された！再度、感謝します！

4

6 に答える 6

3

mouseover、mouseout の代わりに、mouseenter と mouseleave を試してください。

$('.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})
})
于 2012-12-21T08:37:05.263 に答える
1

私はこのようにします：

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

デモンストレーション| コード </p>

短縮版は次のようになります。

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

フィドル

于 2012-12-21T08:41:22.203 に答える
1

あなたの.mouseoverメソッドは良さそうに見えますが、おそらく a も追加する必要がある.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})
})

試して、テスト URL を更新してください

于 2012-12-21T08:36:38.663 に答える
1

stop()通話を追加するだけmouseoutで、魅力的に機能します。

ここでjsFiddle

于 2012-12-21T08:43:57.740 に答える
0

およびの代わりにjquery.hoverを使用してください-http ://api.jquery.com/hover/mouseovermouseout

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

于 2012-12-21T08:40:10.880 に答える
0

次のように使用します。

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

于 2012-12-21T08:44:18.480 に答える