0

我在图像上的 JQUERY 上有一个悬停动画。另一个图像滑上来。当图像未链接到 url 时，它可以完美运行。当我在底部图像中添加标签时它可以，但是当我添加到图像移动时，动画不起作用。

这是我的jQuery代码：

<script type="text/javascript">
$(function() {
    $('.wrap').hover(function() {
        $(this).children('.front').stop().animate({ "top" : '-100px'}, 700);   
    }, function() {
        $(this).children('.front').stop().animate({ "top" : '0px'}, 400);       
    });
});

这是我的css和html代码

<style type="text/css">

#container {
height:100px;
text-align: center;
margin: auto;
}

.wrap {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}

img {
position: relative;
top: 0px; left: 0px;
}
img.front {
position: relative;
top: 100px; 
}
body
{ 
background-image:url('bgimage.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom; 
}
</style>
</head>


   <body>
 <div id="container">
<div class="wrap">
   <a href="ascolta.php"> <img src="radio.png" alt="image" /></a>
      **<a href="ascolta.php">** <img src="radio_h.png" class="front" alt="image" /></a>
 </div>
   <div class="wrap">
    <img src="chat.png" alt="image" />
    <img src="chat_h.png" class="front" alt="image" />
 </div>
   <div class="wrap">
    <img src="programms.png" alt="image" />
    <img src="programms_h.png" class="front" alt="image" />
 </div>
    <div class="wrap">
    <img src="gallery.png" alt="image" />
    <img src="gallery_h.png" class="front" alt="image" />
 </div>
</div>

在我添加星号标记的代码中，相关动画停止工作。

非常感谢你。最好的，

4

1 回答 1

1

您正在使用.children它仅在 DOM 中向下移动单层。改为使用.find。

改变这个：

$(this).children('.front').stop().animate({ "top" : '-100px'}, 700);
$(this).children('.front').stop().animate({ "top" : '0px'}, 400);

到

$(this).find('.front').stop().animate({ "top" : '-100px'}, 700);
$(this).find('.front').stop().animate({ "top" : '0px'}, 400);
于 2012-12-30T23:58:08.230 回答