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 を 1 レベルだけ下に移動するものです。.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 に答える