---
title: "jQuery fadeTo method fades even the hidden elements"
description:
  "This blog discusses how jQuery's fadeTo method fades even the hidden elements
  and the impact of it."
canonical_url: "https://www.bigbinary.com/blog/jquery-fadeto-method-fades-even-the-hidden-elements"
markdown_url: "https://www.bigbinary.com/blog/jquery-fadeto-method-fades-even-the-hidden-elements.md"
---

# jQuery fadeTo method fades even the hidden elements

This blog discusses how jQuery's fadeTo method fades even the hidden elements
and the impact of it.

- Author: Neeraj Singh
- Published: January 29, 2010
- Categories: jQuery

_Following code has been tested with jQuery 1.4.1 . Code demo links are the end
of the blog ._

[fadeTo](http://api.jquery.com/fadeTo) method of jQuery ,strangely, fades event
the hidden elements.

Here is html markup.

```html
<style>
  #hello p {
    display: none;
  }
</style>
<div id="hello">
  <p>this is p inside hello</p>
</div>
<p>This is p outside hello</p>
```

Since the first `p` is hidden, you will see only one `p` element in the browser.
Now execute following jQuery code.

```javascript
$('p').fadeTo('slow', 0.5');
```

You will see both the `p` elements.

jQuery goes out of its way to make sure that hidden elements are visible. Here
is `fadeTo` method.

```javascript
fadeTo: function( speed, to, callback ) {
	return this.filter(":hidden").css("opacity", 0).show().end()
				.animate({opacity: to}, speed, callback);
}
```

Also notice that for a hidden element fadeTo operation starts with opacity of
zero, while other elements will go down towards zero.

Checkout the same demo in slow motion and notice that while the first p element
emerges out of hiding, the other p element is slowing fading. This might cause
unwanted effect . So watch out for this one.

- [First Demo](http://jsfiddle.net/DPWSQ)
- [Second Demo](http://jsfiddle.net/6gaEQ)
- [Third Demo](http://jsfiddle.net/sLwx5)

## Links

- [Human page](https://www.bigbinary.com/blog/jquery-fadeto-method-fades-even-the-hidden-elements)