Festlegen der Transparenz eines DIV und seines Inhalts mithilfe von jQuery

Question

Wie kann die Transparenz eines HTML-DIV-Elements und seines Inhalts mithilfe von jQuery am besten festgelegt werden?

Answer 1

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

Haben Sie die Opazität tatsächlich auf jede der enthaltenen Elemente als auch wollen, oder Sie wollen es genauso zu ‚erscheinen‘, wenn die untergeordneten Elemente die gleiche Opazität haben?

Als Beispiel auf meine Frage, wenn Sie etwas, das ein Element enthält, und jedes der Kinder Elemente wollte, Sie so etwas wie dieses

html

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

jquery tun könnte

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

Hoffe, das hilft. Prost.

Answer 2

Wie theIV sagte Sie die CSS-Methode verwenden kann, aber als Alternative können Sie belebte verwenden:

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

dies wird die Opazität von Ihnen div (und dessen Inhalt) auf 0,5 animiert (von was auch immer es war zu beginnen) in 100 Millisekunden.

Answer 3

Eine weitere Option - Speichern Sie Ihre Tastatur und verwenden fadeTo:

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

Answer 4

testen Eigenschaften

$('#my_div').css("opacity", "0.5"); // Unmittelbar Opazität $('#my_div').fadeTo(0, 0.5); // Animiert die Deckkraft auf 50% im Verlauf von 0 Millisekunden setzt . Erhöhe die 0, wenn du sie animieren willst. $('#my_div').fadeIn(); // Animiert die Opazität von 0 bis 100%