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 回答