30878

Fade without jQuery

Question:

I'm using this function to open and close elements onclick. How can I add some fade effect without using jQuery?

function toggle_visibility(){ for(var i = 0,len = arguments.length;i < len;i++){ var e = document.getElementById(arguments[i]).style,d = e.display; e.display = (d == "block") ? "none" : "block"; } }

Answer1:

You can use css3 transition and opacity to do this

#block { transition: opacity 1s ease-in-out; } .out { opacity: 0; } .in { opacity: 1; }

then use out or in class to hide or show the element

Answer2:

You can write your own function like this:

var toggleFade = function(element, time, callback) { var timeStep = 50; var step = timeStep / time; var toValue = 1; if (element.style.display != 'none') { step = -step; toValue = 0; element.style.opacity = element.style.opacity || 1; } else { element.style.opacity = element.style.opacity || 0; element.style.display = 'block'; } var interval = setInterval(function() { var newVal = +element.style.opacity + step; if (newVal < 0 && step < 0) { clearInterval(interval); element.style.opacity = 0; element.style.display = 'none' callback && callback(); } else if (newVal > 1 && step > 0) { clearInterval(interval); element.style.opacity = 1; callback && callback(); } else element.style.opacity = newVal; }, timeStep); }

<a href="http://jsfiddle.net/WXcnc/1/" rel="nofollow"><strong>Demo</strong></a>

Recommend

  • CSS/XHTML Menu - Working in all browsers - IE6 Help
  • CSS border-image - critical
  • Is there any way to center certain columns in table?
  • $_POST for text in DIV elements
  • How can I count unique terms in a plaintext file case-insensitively?
  • Programmatically Update Linked Named Range of excel object in MS Word (2007)
  • How dotnet build chooses the output name
  • react split panel resize
  • Responsive left sidebar open close
  • Making Google Visualization - Annotation Chart to work in GWT
  • Prevent page break in text block with iText, XMLWorker
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • hide missing dates from x-axis ggplot2
  • Update Google Maps traffic layer without page reloading
  • Remove final comma from string in vb.net
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • copying resource to sdcard gives a damaged file in android
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Illegal mix of collations for operation for date/time comparison
  • MySQL WHERE-condition in procedure ignored
  • Change an a tag attribute in JavaScript based on screen width
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • retrieve vertices with no linked edge in arangodb
  • How to set the response of a form post action to a iframe source?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal