开发者

Hover/Fadeto/Toggle Multiple Class Changing

So my problem is rather simple and complex at the same time. I am trying to create links that fade in when you mouseover them and fade out when you mouseout of them. At the same time that you are going over them I would like a pic to slide from the left. This is the easy part, I have every thing working. The image fades and another image slides. I did this by using a hover, fadeto, and toggle("slide"). I would like to do this in a table format with multiple images being able to be scrolled over and sliding images out. The problem is that I am calling my sliding image to a class and when I hover over the letters both images slide out. Does anybody have a solution for this?

I posted the code that I used below:

<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" /&开发者_JS百科gt;</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>


You can change it around so it goes up to the <tr> then searches for the cousin .text-slide using .closest() and .find(), like this:

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


You could change the scope of the selector, for example

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

will limit jQuery's searching to the <td>

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜