Серая вне divs Использование JQuery

Я пытаюсь использовать этот код:

<script>
jQuery('#MySelectorDiv').fadeTo(500,0.2);
</script>

Чтобы погасить кучу divs по имени MySelectorDiv, единственное, что он только угасает 1-й, а не все из них... почему?

Я также хотел бы опередить div при опрокидывании, поэтому в основном все div были бы выделены серым цветом, за исключением того, что активная часть перевернулась.

Надеюсь, вы поймете.

Ответы

Ответ 1

только первый из них исчезает, потому что вы используете идентификатор вместо класса.

Если вы хотите, чтобы все ваши 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, а затем прикрепляет к ним событие зависания - где первая функция запускается, когда мышь входит в область, а вторая функция запускается, когда ваша мышь покидает область.

Ответ 2

Потому что вы используете идентификатор, а не класс. Идентификаторы должны быть уникальными на странице, а классы могут повторяться. Просто измените все свои 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);

Демо: http://jsfiddle.net/mm8Fv/