I have a simple yet complex problem that I am trying to solve. I want to create links that fade in upon mouseover and fade out when the mouse moves away. Simultaneously, I want an image to slide in from the left while hovering over the links. I have managed to get everything working so far - the image fades and another image slides in. I achieved this using hover, fadeTo, and toggle("slide"). My goal now is to replicate this in a table format where multiple images can be hovered over, triggering sliding images. The issue I am facing is that both images slide out when hovering over the letters, as I am calling the sliding image to a class. Can anyone provide a solution for this?
Below is the code I used:
<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>