Fade In CSS class

Question

I'm wondering how I can fade in a css class with jquery. The effect I'm looking for is sort of like what you see here: https://squareup.com/

What I've tried so far is this:

$(document).ready(function() {
    $('.mini-nav li').hover(function () {
    $('.hover').fadeIn(slow);
};
});

I thought about the .addClass() method, but I'm not sure where to add it (or if that is the best thing to do).

EDIT: Here is a fiddle of something I've tried: http://jsfiddle.net/J93NR/1/

The site you are linking to does this with just a regular fadeIn/fadeOut of different elements at different times, and a css sprite that looks like [this](https://d1g145x70srn7h.cloudfront.net/static/cfcd8a7b595261bbae796910d11d44e02c02e34a/images/sprites/navigation-sf3fa60fe27.png). — adeneo, Apr 21 '12 at 00:09
Thanks @adeneo, if I was using an image background I would just use css sprites like you mentioned (and maybe jquery .animate). My background is just a rgba color, though. — Connor, Apr 21 '12 at 00:44
@Connor: using CSS transition with background-color is just a one-line change to your CSS, see: http://jsfiddle.net/ZAgnY/ — Lie Ryan, Apr 21 '12 at 01:30

score 10 · Accepted Answer · edited Apr 21 '12 at 01:34

10

you don't need jquery for this, a pure CSS solution is much simpler (fiddle):

<div class="outer"><div class="inner"></div></div>

.outer {
    background: url(...);
}
.inner {
    background: url(...);
    opacity: 1;
    transition: opacity 0.3s;
}
.inner:hover {
    opacity: 0;
}

http://jsfiddle.net/ZAgnY/

edited Apr 21 '12 at 01:34

Curtis

101,612
66
270
352

answered Apr 21 '12 at 01:06

Lie Ryan

62,238
13
100
144

-1 This doesn't work when adding content into either the `outer` div or the `inner` div http://jsfiddle.net/Curt/hByb8/1/ – Curtis Apr 21 '12 at 01:15
1

@Curt: not a problem, the Square example does not have any text inside it. In the case of OPs original fiddle though, the [solution is even simpler](http://jsfiddle.net/ZAgnY/) – Lie Ryan Apr 21 '12 at 01:27
I hadn't noticed that in the OPs example. +1 good solution. Edited answer to upvote – Curtis Apr 21 '12 at 01:33
I'm going to go with this because of the simplicity, and all the strange js problems. Thanks. – Connor Apr 21 '12 at 01:46
Elegant, simple solution. Thanks, @LieRyan +1 – Gaʀʀʏ Jun 13 '12 at 21:17

Starx · Answer 2 · 2012-04-21T00:10:18.437

2

If you are using jQuery UI, there is an option to animate using the class using switchclass()

Update:

$("element").addClass("classname").fadeIn("slow");

edited Apr 21 '12 at 00:10

answered Apr 20 '12 at 23:58

Starx

77,474
47
185
261

Thanks, and I see the usefulness of this, but I need to just add the class (with a fade), not do any switching. – Connor Apr 21 '12 at 00:04

score 2 · Answer 3 · answered Apr 21 '12 at 00:10

<style type="text/css">
#leaf,#leaf:before{background:url(sprite.png)}
#leaf{position:relative}
#leaf:before{content:'\0020';position:absolute;top:0;left:0;display:none}
</style>

<!-- more html -->

<ul id="menu">
  <li id="leaf"><a href="#">Link</a></li>
</ul>

<!-- more html -->

<script type="text/javascript">
$(document).ready(function () {
  $('.min-nav li').hover({
    // Handler in
    function () {
      $("#leaf:before").fadeIn("slow");
    },
    // Handler out
    function () {
      $("#leaf:before").fadeOut("slow");
    }
  });
});
</script>

Of course it would also be possible to achieve this with CSS3 instead of jQuery. Which is exactly what the guys from the website you linked are doing.

Ram · Answer 4 · 2012-04-21T00:49:49.767

1

there is a syntax error in the code: try this:

$(document).ready(function() {
    $('.mini-nav li').mouseenter(function () {
    $('.hover').fadeIn("slow");
    });
});

you can select a tags instead, hovering on your li tags in a way that you have style them hovers outside the visible area of the menu, try this:

http://jsfiddle.net/J93NR/3/

or:

http://jsfiddle.net/J93NR/4/

edited Apr 21 '12 at 00:49

answered Apr 20 '12 at 23:57

Ram

143,282
16
168
197

Thanks @stealthninja, that helps, but my situation is a little different. I'll work on a fiddle. – Connor Apr 21 '12 at 00:36
I like your second fiddle... I copied it into my page, but it didn't work! :( I'm loading jquery so I know it's not that (I have other js on my page). – Connor Apr 21 '12 at 01:06
@Connor have you added class .hover of the css? `.hover { background-color: #000 !important}` – Ram Apr 21 '12 at 01:08
@Raminson yes, I have the .hover – Connor Apr 21 '12 at 01:11
@Connor uhm, use firebug console, and check if there is an error. – Ram Apr 21 '12 at 01:18
@Raminson This is the only error: "Uncaught SyntaxError: Unexpected token ILLEGAL" not sure what to make of that. – Connor Apr 21 '12 at 01:21
@Connor probably you have not quoted some `string`s in your js codes. like `fadeIn(slow)` which should be `fadeIn("slow")`; – Ram Apr 21 '12 at 01:27
@Raminson That doesn't appear to be the problem. – Connor Apr 21 '12 at 01:31
@Connor check this: http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal – Ram Apr 21 '12 at 01:33

Fade In CSS class

4 Answers4