Установите прозрачность DIV и его содержимого с помощью jQuery

Question

Каков наилучший способ установить прозрачность элемента HTML DIV и его содержимого с помощью jQuery?

Answer 1

$('#my_element').css({ 'opacity' : 0.7 });

Хотите ли вы фактически установить непрозрачность для каждого из содержащихся элементов, или вы просто хотите, чтобы он «отображался», как если бы дочерние элементы имели одинаковую непрозрачность?

В качестве примера на мой вопрос, если вы хотите что-то, что устанавливает элемент, и каждый из дочерних элементов, вы можете сделать что-то вроде этого

HTML

<div id="my_element">
  <div>
    lorem
  </div>
  <div>
    ipsum
  </div>
</div>

JQuery

$('#my_element').children().
                 css({ 'opacity' : 0.25 }).
                 end().
                 css({ 'opacity' : 0.25 });

Надеюсь, это поможет. Приветствия.

Answer 2

Другой вариант - сохранить клавиатуру и использовать fadeTo :

$('#someDiv').fadeTo("slow",0.5);

Answer 3

Попробуйте это свойства

$('#my_div').css("opacity", "0.5"); // Сразу устанавливает непрозрачность $('#my_div').fadeTo(0, 0.5); // Анимация непрозрачности до 50% в течение 0 миллисекунд. Увеличьте 0, если вы хотите его оживить. $('#my_div').fadeIn(); // Анимация непрозрачности от 0 до 100%

Answer 4

Как сказал theIV, вы можете использовать метод css, но в качестве альтернативы вы можете использовать animate:

$('#my_element').animate({ opacity: 0.5 }, 100);

это оживит непрозрачность вашего div (и его содержимого) до 0,5 (с чего бы это ни было с самого начала) за 100 миллисекунд.