悬停/淡化/切换多个类更改

时间:2010-05-07 17:47:27

标签: javascript jquery html css jquery-ui

所以我的问题在同一时间非常简单和复杂。我试图创建链接,当你鼠标悬停它们时淡入淡出,当你鼠标移除它们时淡出。在你越过他们的同时我想从左边滑动图片。这是很容易的部分,我有一切工作。图像淡出,另一张图像滑动。我通过使用悬停,淡入淡出和切换(“幻灯片”)来完成此操作。我想以表格格式执行此操作,其中多个图像可以滚动并滑出图像。问题是我将滑动图像称为类,当我将鼠标悬停在字母上时,两个图像都会滑出。有人有解决方案吗?

我发布了我在下面使用的代码:

<html>
<head>
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script>

<style type="text/css">
    .text-slide { display: none; margin: 0px; width: 167px; height: 50px; }
</style>

<script>
$(document).ready(function(){
$(".letterbox-fade").fadeTo(1,0.25);
$(".letterbox-fade").hover(function () {
  $(this).stop().fadeTo(250,1);
  $(".text-slide").toggle("slide", {}, 1000);
  },
  function() {
    $(this).stop().fadeTo(250,0.25);
    $(".text-slide").toggle("slide", {}, 1000);
});
});

</script>
</head>

<body style="background-color: #181818">

<table>
<tr>
<td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/A-Letterbox-Selected.png" /></div></td>
<td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td>
</tr>
<tr>
<td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/B-Letterbox-Selected.png" /></div></td>
<td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td>
</tr>
</table>

</body>
</html>

2 个答案:

答案 0 :(得分:2)

您可以更改它以使其达到<tr>,然后使用.closest().find()搜索表兄.text-slide,如下所示:

$(".letterbox-fade").hover(function () {
  $(this).stop().fadeTo(250,1)
         .closest("tr").find(".text-slide").toggle("slide", {}, 1000);
}, function() {
  $(this).stop().fadeTo(250,0.25)
         .closest("tr").find(".text-slide").toggle("slide", {}, 1000);
});

答案 1 :(得分:0)

您可以更改选择器的范围,例如

$(this).parent().find(".text-slide").toggle("slide", {}, 1000); 

会限制jQuery搜索<td>