Я пытаюсь использовать этот код:
<script>
jQuery('#MySelectorDiv').fadeTo(500,0.2);
</script>
Чтобы погасить кучу divs по имени MySelectorDiv, единственное, что он только угасает 1-й, а не все из них... почему?
Я также хотел бы опередить div при опрокидывании, поэтому в основном все div были бы выделены серым цветом, за исключением того, что активная часть перевернулась.
Надеюсь, вы поймете.
только первый из них исчезает, потому что вы используете идентификатор вместо класса.
Если вы хотите, чтобы все ваши divs исчезли, вместо этого:
<div id="MySelectorDiv">...</div>
сделайте следующее:
<div class="MySelectorDiv">...</div>
и измените строку селектора jquery на '.MySelectorDiv'
Причина, по которой он не работает в настоящее время, состоит в том, что идентификатор должен быть уникальным на странице, поэтому jQuery не будет искать все элементы, только первый, соответствующий этому идентификатору.
Как для замирания при наведении:
$(".MySelectorDiv")
.fadeTo(500, 0.2)
.hover(function () {
$(this).fadeTo(500, 1);
}, function () {
$(this).fadeTo(500, 0.2);
});
Это сначала затухает ваши div, а затем прикрепляет к ним событие зависания - где первая функция запускается, когда мышь входит в область, а вторая функция запускается, когда ваша мышь покидает область.
Потому что вы используете идентификатор, а не класс. Идентификаторы должны быть уникальными на странице, а классы могут повторяться. Просто измените все свои divs на использование class= "myselectordiv" вместо id. Затем ваш селектор jQuery изменится на:
jQuery('.myselectordiv')...
Чтобы получить эффект опрокидывания:
// Fade everything out first
jQuery('.myselectordiv').fadeTo(500, 0.2);
jQuery('.myselectordiv').hover(function () {
// Mouse enter, fade in
jQuery(this).fadeTo(500, 1);
}, function () {
// Mouse leave, fade out
jQuery(this).fadeTo(500, 0.2);
});
Это связывает две функции с вашими div, одну для mouseenter и одну для mouseleave, и, как вы видите, они делают противоположные fadeTos друг другу.
Примечание: там есть тонкая проблема с этим, что вы заметите, если быстро наведите указатель мыши на divs. Даже после того, как вы отделили мышь от div, если она все еще исчезнет, она продолжит завершать анимацию, прежде чем она снова исчезнет. Это может быть то, что вы хотите, но если вы быстро перемещаете мышь между двумя div, они будут постоянно исчезать и выходить после этого, потому что длинная очередь анимационных эффектов складывается. Чтобы предотвратить это, добавьте .stop() перед каждым fadeTo() внутри наведения:
jQuery(this).stop().fadeTo(500, 1);