使用html和css滑动jQuery图像_Jquery_Html

使用html和css滑动jQuery图像

jquery html

使用html和css滑动jQuery图像,jquery,html,Jquery,Html,我这里有一个演示来说明我的问题左侧的红色块是一个图像，当您将鼠标悬停在jQuery上时，它会随着jQuery上下滑动我想这样做，但没有在右侧块的图像右边的块是包含div的两个div。我的问题是我无法让它工作，有人能看到我在哪里吗出问题了 <!DOCTYPE html> <html> <head> <title>Title of the document</title> &l

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

左侧的红色块是一个图像，当您将鼠标悬停在jQuery上时，它会随着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>


文件标题
#包裹{
利润率：50像素
}
#盒子{
身高：215px；
宽度：330px；
浮动：左；
位置：相对位置；
溢出：隐藏；
利润率：0 15px 15px 0；
}
#盒式img{
位置：绝对位置；
}
#框2{
宽度：330px；
身高：215px；
位置：相对位置；
1top:300px；
溢出：隐藏；
}
#框2.con{
宽度：330px；
身高：215px；
}
#框2#顶部{
背景：红色；
}
#框2#底部{
背景：#eee；
}
$（'#框a'）。悬停（函数（）{
$（（img），this.stop（）.animate（{top:-215px}，{queue:false，duration:280}）；
}，函数（）{
$（“img”，this）.stop（）.animate（{top:“0px”}，{queue:false，duration:260}）；
})
//
$（'#box2'）。悬停（函数（）{
$（'#boxWrap'，this）.stop（）.animate（{top:-215px}，{queue:false，duration:280}）；
}，函数（）{
$（#boxWrap'，this）.stop（）.animate（{top:0px}，{queue:false，duration:260}）；
})

您不应该更改/设置顶部动画，而应该更改/设置#boxwrap div的页边距顶部动画

我修改了下面的代码（请检查$（'#box2'）。悬停部分）：


文件标题
#包裹{
利润率：50像素
}
#盒子{
身高：215px；
宽度：330px；
浮动：左；
位置：相对位置；
溢出：隐藏；
利润率：0 15px 15px 0；
}
#盒式img{
位置：绝对位置；
}
#框2{
宽度：330px；
身高：215px；
位置：相对位置；
溢出：隐藏；
}
#框2.con{
宽度：330px；
身高：215px；
}
#框2#顶部{
背景：红色；
}
#框2#底部{
背景：#eee；
}
$（'#框a'）。悬停（函数（）{
$（（img），this.stop（）.animate（{top:-215px}，{queue:false，duration:280}）；
}，函数（）{
$（“img”，this）.stop（）.animate（{top:“0px”}，{queue:false，duration:260}）；
})
//
$（'#box2'）。悬停（函数（）{
$（'#boxWrap'，this）.stop（）.animate（{“边距顶端”：“-215px”}，{queue:false，duration:280}）；
}，函数（）{
$（#boxWrap'，this）.stop（）.animate（{“边距顶端”：“0px”}，{queue:false，duration:260}）；
})

要使代码正常工作，您需要做的就是将position:relative样式设置为boxWrap。

或者，您可以设置

position:relative#boxWrap

上的code>也应该可以使用。有什么问题？你没有很好地解释自己。你对这张照片到底有什么问题。你能再解释一下吗？很抱歉，我显然没有解释清楚——漫长的一天，他的答案是完美的。
 <!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>