Hover/Fadeto/Toggle Multiple Class Changing

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

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

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

источник

2010-05-07 Slick Willis

You может изменить его, чтобы он доходил до <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); 
});

источник

2010-05-07 18:33:01

Это работает отлично !!! Спасибо. Следующий вопрос - это то, что я использую, чтобы сделать так, чтобы, если мышь уходит до того, как изображение полностью выйдет, оно ускорится, а не завершит движение? –

@SlideWillis - добавьте '.stop()' перед этим '.toggle()' :) –

Хммм, это не сработало. Он просто отключает слайд. Не завершает ли текущее событие завершение текущего запуска и ждет, пока не будет активирован следующий? Я ищу его, чтобы перейти на следующий, даже когда мышь уходит, даже если она не заканчивается предыдущей. –

Вы можете изменить масштаб селектора, например

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

будет ограничивать поиск Jquery к в <td>

источник

2010-05-07 18:09:17

Я смущен, как это будет работать? Это заменяет строку: .closest ("tr"). Find (". Text-slide"). Toggle ("slide", {}, 1000); Потому что я заменил его, и слайд больше не работает. –

Hover/Fadeto/Toggle Multiple Class Changing

ответ

Смежные вопросы