設置鏈接後jquery動畫無效

我在圖像上的JQUERY上懸停動畫。另一張圖片向上滑動。當圖片沒有鏈接到網址時，它可以很好地工作。它可以，當我在底部圖像中添加標籤，但當我添加到圖像移動，動畫不起作用。設置鏈接後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>

在代碼當我添加星號的標籤，相關的動畫停止工作。

非常感謝。 best，

來源

2012-12-30 Alisey

你能不能把它放在一個小提琴？ –

您正在使用.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-30 23:58:08

非常感謝您的解答和如此快速的回答，它現在起作用。 – Alisey

不客氣。 –

設置鏈接後jquery動畫無效

回答

相關問題