Js toggle opacity

Asked
Active3 hr before
Viewed126 times

5 Answers

opacity
90%

I’d like to have a button change opacity on click, I’d like to use javascript to target a certain class as I have a lot of these buttons

Example_snippet/controller/utility/_opacity.js/ var buttons = document.getElem. . .
var buttons = document.getElementsByClassName('aButton');

for (var i = 0; i < buttons.length; i++) {
   //console.log(buttons[i].style.opacity );

   //-- The button does not have any opacity attribute unless you have set it in the inspector.
   //So I found surronding the numbers in quotes works better for all possibilities 

   buttons[i].style.opacity = (buttons[i].style.opacity == "0" ? "1" : "0");

}
load more v
88%

If you need to change the display value of an element after a fading, that’s tougher, Not really possible in CSS since display isn’t transitionable

Example_snippet/controller/utility/_opacity.js/ .m-fadeOut { visibility: hid. . .
.m - fadeOut {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0 s linear 300 ms,
      opacity 300 ms;
   }
   .m - fadeIn {
      visibility: visible;
      opacity: 1;
      transition: visibility 0 s linear 0 s,
      opacity 300 ms;
   }
load more v
72%

Stack Overflow en español, Stack Overflow Public questions & answers , Meta Stack Overflow ,Thanks for contributing an answer to Stack Overflow!

Example_snippet/controller/utility/_opacity.js/ $(document).ready(function() {. . .
$(document).ready(function() {
   $(".alphabetLetter").click(function(event) {
      if ($(this).css('opacity') == '1')
         $(this).animate({
            'opacity': 0
         })
      else
         $(this).animate({
            'opacity': 1
         })
   });
});
load more v
65%

easing (default: swing) Type: String A string indicating which easing function to use for the transition, ,Description: Display or hide the matched elements by animating their opacity

Example_snippet/controller/utility/_model.js/ <!doctype html><html lang="en". . .
<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>fadeToggle demo</title>  <script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body> <button>fadeToggle p1</button><button>fadeToggle p2</button><p>This paragraph has a slow, linear fade.</p><p>This paragraph has a fast animation.</p><div id="log"></div> <script>$( "button" ).first().click(function() {  $( "p" ).first().fadeToggle( "slow", "linear" );});$( "button" ).last().click(function() {  $( "p" ).last().fadeToggle( "fast", function() {    $( "#log" ).append( "<div>finished</div>" );  });});</script> </body></html>
75%

Example_snippet/controller/utility/_model.js/ $('#registerButton').on('click. . .
$('#registerButton').on('click', function() {
   $('#register').toggle();
});