Question

我最近一直在玩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的单个副本。

提前感谢您的时间和帮助。非常赞赏

Answer 1

尝试，

$(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');
});
});

jQuery - 对多个div有相同的效果

1 个答案: