0

我在这里有一个演示来说明我的问题。

http://www.ttmt.org.uk

左边的红色块是一个图像，当你将鼠标悬停在它上面时，它会随着 jQuery 上下滑动。

我想这样做，但右侧块上没有图像。

右块是包含 div 中的两个 div。我的问题是我无法让它工作，任何人都可以看到我
哪里出错了。

    <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>

      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">

        #wrap{
            margin:50px
        }
        #box{
            height:215px;
            width:330px;
            float:left;
            position:relative;
          overflow:hidden;
            margin:0 15px 15px 0;
        }
        #box img{
            position:absolute;
        }

        #box2{
          width:330px;
          height:215px;
          position:relative;
          1top:300px;
          overflow:hidden;
        }
        #box2 .con{
          width:330px;
          height:215px;
        }
        #box2 #top{
          background:red;
        }
        #box2 #bottom{
          background:#eee;
        }
      </style>

      </head>

    <body>

      <div id="wrap">

        <div id="box">
          <a href=""><img src="box.png" alt="" /></a>
        </div>

        <div id="box2">

          <div id="boxWrap">
            <div id="top"  class="con">
            </div>

            <div id="bottom" class="con">
            </div>
          </div>  
        </div><!--boxWrap-->

        </div><!--wrap-->


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <script src="jquery.easing.1.3.js" type="text/javascript"></script>

      <script>
        $('#box a').hover(function(){
          $("img", this).stop().animate({top:"-215px"},{queue:false, duration:280});
        },function(){
          $("img", this).stop().animate({top:"0px"},{queue:false, duration:260});
        })
        //
        $('#box2').hover(function(){
          $('#boxWrap' ,this).stop().animate({top:"-215px"},{queue:false, duration:280});
        },function(){
          $('#boxWrap' ,this).stop().animate({top:"0px"},{queue:false, duration:260});
        })
      </script>

    </body>

    </html>
4

3 回答 3

1

你不应该改变/动画顶部，你应该改变/动画#boxwrap div的margin-top

我在下面修改了您的代码（检查 $('#box2').hover 部分）：

 <!DOCTYPE html>
    <html>
      <head>
      <title>Title of the document</title>

      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

      <style type="text/css">

        #wrap{
            margin:50px
        }
        #box{
            height:215px;
            width:330px;
            float:left;
            position:relative;
          overflow:hidden;
            margin:0 15px 15px 0;
        }
        #box img{
            position:absolute;
        }

        #box2{
          width:330px;
          height:215px;
          position:relative;
          overflow:hidden;
        }
        #box2 .con{
          width:330px;
          height:215px;
        }
        #box2 #top{
          background:red;
        }
        #box2 #bottom{
          background:#eee;
        }
      </style>

      </head>

    <body>

      <div id="wrap">

        <div id="box">
          <a href=""><img src="box.png" alt="" /></a>
        </div>

        <div id="box2">

          <div id="boxWrap">
            <div id="top"  class="con">
            </div>

            <div id="bottom" class="con">
            </div>
          </div>  
        </div><!--boxWrap-->

        </div><!--wrap-->


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      <script src="jquery.easing.1.3.js" type="text/javascript"></script>

      <script>
        $('#box a').hover(function(){
          $("img", this).stop().animate({top:"-215px"},{queue:false, duration:280});
        },function(){
          $("img", this).stop().animate({top:"0px"},{queue:false, duration:260});
        })
        //
        $('#box2').hover(function(){
          $('#boxWrap' ,this).stop().animate({"margin-top":"-215px"},{queue:false, duration:280});
        },function(){
          $('#boxWrap' ,this).stop().animate({"margin-top":"0px"},{queue:false, duration:260});
        })
      </script>

    </body>

    </html>
于 2012-10-12T19:03:32.107 回答
0

要使代码正常工作，您需要做的就是设置位置：相对于 boxWrap 的样式。

于 2012-10-12T19:04:01.710 回答
0

或者，您可以设置position: relative;On #boxWrapThat 应该也可以。

于 2012-10-12T19:06:44.293 回答