0

ここに私の問題を説明するためのデモがあります。

http://www.ttmt.org.uk

左側の赤いブロックは、jQueryにカーソルを合わせると上下にスライドする画像です。

これを実行したいのですが、右側のブロックに画像がありません。

右側のブロックは、含まれているdiv内の2つの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

トップを変更/アニメーション化するのではなく、＃boxwrapdivのマージントップを変更/アニメーション化する必要があります

以下のコードを変更しました（$（'＃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を設定することもできます#boxWrap。これも機能するはずです。

于 2012-10-12T19:06:44.293 に答える