设置链接后，jquery动画不起作用

Question

我在一张图片上有一个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>        

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

非常感谢。最好的

Answer 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);