Question

我在JQUERY上的图像上有悬停动画。另一张图片滑了起来。当图像没有链接到网址时，它工作得很好。当我在底部图像中添加标签时可以，但是当我添加到图像移动时，动画无效。

这是我的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);

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

1 个答案: