0

私はjQuery最近いじっていて、画像を (ホバー時に) 移動/スライドさせて、その背後に隠していたデータを明らかにする簡単なコードを書くことができました。

ポートフォリオページで作品を紹介したいものです。

私の問題は、スクリプトが単一の DIV で正常に動作することですが、コードで呼び出したのと同じ ID を持つ他の DIV では動作しないようです。

ここに私のJavascriptコードがあります:

<script type="text/javascript">
$(document).ready(function(){     
    $('#featured-work-thumbnail').hover(function(){
        $(this).children('.front').stop().animate({'top' : '300px'}, 1000, 'easeInOutExpo');
    }, function(){
        $(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 1000, 'easeInOutExpo');
    });
});
</script>

そして、これが使用しているDIVの例です：

<div id="featured-work-thumbnail" class="wrap">
    <div class="details">
        <h1>Website Title</h1>
        <p>Website Desc</p>
        <a href="#">Visit Website</a>
    </div>
<img src="images/thumbnails/thumb1.png" class="front" />
</div>

画像にカーソルを合わせると、画像が下にスライドし、class="details"その下にある DIV が表示されます。しかし、私が述べたように、これはまさに後です。私のDIVの単一のコピーでのみ機能します。

お時間をいただきありがとうございます。とても有難い

4

1 に答える 1

0

試す、

$(document).ready(function(){
$('#featured-work-thumbnail').hover(function(){
$(this).children('.front').stop().animate({'top' : '300px'}, 1000, 'easeInOutExpo');
$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 1000, 'easeInOutExpo');
});
});
于 2012-08-19T12:52:19.267 に答える