我有一个div:
<div id="p1" class="img-projects" style="margin-left:0;">
<a href="project1.php"> <img src="image1.png"/></a>
<div id="p1" class="project-title">Bar Crawler</div>
</div>
在鼠标悬停时,我想添加一个不透明的图像,并显示项目标题。 所以我使用这段代码:
<script type="text/javascript">
$(function() {
$('.project-title').hide();
$('#p1.img-projects img').mouseover(
function() {
$(this).stop().animate({ opacity: 0.3 }, 800);
$('#p1.project-title').fadeIn(500);
});
$('#p1.img-projects img').mouseout(
function() {
$(this).stop().animate({ opacity: 1.0 }, 800);
$('#p1.project-title').fadeOut();
});
$('#p2.img-projects img').mouseover(
function() {
$(this).stop().animate({ opacity: 0.3 }, 800);
$('#p2.project-title').fadeIn(500);
});
$('#p2.img-projects img').mouseout(
function() {
$(this).stop().animate({ opacity: 1.0 }, 800);
$('#p2.project-title').fadeOut();
});
});
</script>
代码工作正常但有没有人知道优化我的代码的方法?
谢谢
答案 0 :(得分:2)
您可以将一个.hover()
函数用于相对而非ID依赖的所有内容,如下所示:
$('.img-projects img').hover(function() {
$(this).stop().animate({ opacity: 0.3 }, 800)
.closest('.img-projects').find('.project-title').fadeIn(500);
}, function() {
$(this).stop().animate({ opacity: 1.0 }, 800)
.closest('.img-projects').find('.project-title').fadeOut();
});
这会找到与悬停的元素相关的所有元素,而不是具有不同的函数来处理每个元素...您可以删除元素中的ID,除非它们用于其他目的。由于目前您的HTML无效,每次使用ID两次,因此也解决了这个问题。