JQuery показать / скрыть и непрозрачность - PullRequest
Новая
       12

JQuery показать / скрыть и непрозрачность

1 голос
/ 30 июня 2010

Вот мои условия lehmans о том, чего я пытаюсь достичь.

У меня будет 3 деления 100x100 px, с плавающей точкой слева.

<div id="container">
     <div id="1">did you know?</div>
     <div id="2">help</div>
     <div id="3">other</div>
</div>

при наведении курсора или наведении указателя мыши на любой из этих 3-х div, через div () появляется другой div.или slideDown ();с содержанием, специфичным для этой темы.

вопрос в том, есть ли способ сделать так, чтобы при наведении курсора на любой из элементов div 1,2,3 два других понизили непрозрачность, чтобы они выгляделиПрозрачный?

эту часть я не могу понять ...

спасибо заранее.

Ответы [ 2 ]

8 голосов
/ 30 июня 2010

Во-первых, убедитесь, что эти идентификаторы действительны, например, не начинаются с цифры (если только у вас нет типа документа HTML5).

Затем вы можете использовать .animate() и.hover(), вот так: 

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
}, function() {
  $(this).stop().animate({ opacity: 0.2 }); 
});

Вы можете попробовать демо здесь , начальный .css() вызов сделатьвсе они не-hovered-ish при загрузке страницы.

Для более полной демонстрации, также показывающей содержимое, попробуйте это :)

Вот чтопример разметки: 

<div id="container">
     <div>did you know?</div>
     <div>help</div>
     <div>other</div>
</div>

<div id="content">
    <div>Did You Know? Content</div>
    <div>Help Content</div>
    <div>Some other stuff</div>
</div>

и сценария: 

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
  $("#content div").eq($(this).index()).stop(true, true).slideDown();
}, function() {
  $(this).stop().animate({ opacity: 0.2 });
  $("#content div").eq($(this).index()).stop(true, true).slideUp();
});

Конечно, вы можете настроить его так, чтобы оставить открытым последнее зависание, и т. д. ... это всего лишь идея эффектакак вы descibe.

0 голосов
/ 30 июня 2010

что-то вроде этого: 

div.onmouseover = function() {
    for(i = 0, c = this.parentNode.childNodes, e = c.length; i < e; i++) {
        if (c[i] !== this) {
            $(c[i]).css('opacity', '...');
        }
    }
}
...