Hover / Fadeto / Toggle Multiple Classing Change - PullRequest
Новая
       6

Hover / Fadeto / Toggle Multiple Classing Change

1 голос
/ 07 мая 2010

Так что моя проблема довольно проста и сложна одновременно. Я пытаюсь создать ссылки, которые исчезают при наведении на них курсора мыши и исчезают при их наведении мыши. В то же время, когда вы проходите через них, я бы хотел, чтобы картинка скользила слева. Это легкая часть, у меня все работает. Изображение исчезает, и другое изображение скользит. Я сделал это с помощью hover, fadeto и toggle («слайд»). Я хотел бы сделать это в формате таблицы с несколькими изображениями, которые можно прокручивать и выдвигать изображения. Проблема в том, что я вызываю мое скользящее изображение в классе, и когда я нахожу над буквами, оба изображения выдвигаются. У кого-нибудь есть решение для этого?

Я разместил код, который использовал ниже: 

<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 ]

2 голосов
/ 07 мая 2010

Вы можете изменить его так, чтобы оно доходило до <tr>, а затем искать двоюродного брата .text-slide, используя .closest() и .find(), например так: 

$(".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);
});
0 голосов
/ 07 мая 2010

Вы можете изменить область действия селектора, например, 

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

ограничит поиск jQuery значением <td>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...