Is it possible to add a jQuery fadeIn function to a css change?

Question

I was just wondering if it is possible to cause the css background change that I use jQuery to perform can be enhanced with a fadeIn function. I know this can be accomplished using hidden divs, but I would prefer to use 1 div and fadeIn the image from CSS. Here is the working script with no fade.

jQuery('nav .home a').mouseover(function()
  {
    jQuery('.viewport').addClass('viewporthome');
  });
jQuery('nav .home a').mouseout(function()
  {
    jQuery('.viewport').removeClass('viewporthome');
  });

I tried nesting a jQuery(jQuery('.viewport').addClass('viewporthome')).fadeIn(1000); to no avail. Anyone have any ideas?

A jsFiddle would help illustrate your issue, it is hard to know exactly what you are after. — dezman, Jun 12 '13 at 20:01
I am not following...What do you mean by "enhanced"? What are you trying to do exactly? — Dom, Jun 12 '13 at 20:03
Here's a duplicate of what you want: http://stackoverflow.com/questions/3894734/fade-a-class-in — tymeJV, Jun 12 '13 at 20:03
Do you mean that adding and removing this class adds and removes a background image? And you would like to have that background image transition fade rather than instant? — James Montagne, Jun 12 '13 at 20:03
currently the css adds a background to an empty div displaying the image. I would just like to make it so the image fades in gradually instead in appearing instantly like it does now. — Chris, Jun 12 '13 at 20:04
@Dom you got it with the fade, want to post an answer so I can credit ya? — Chris, Jun 12 '13 at 20:10

Joe · Answer 1 · 2013-06-12T22:05:55.407

0

Jquery UI (jqueryui.com) provides that as an extension. Other than that you would need to apply the styles and animate them.

edit:

you can't fade content separately from background, but you can use img tags to fake the background and fade them:

CSS:

#img1.over { opacity: 1; }
#img1.out { opacity: 0; }
#img2.over { opacity: 0; }
#img2.out { opacity: 1; }

.bgndimg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

HTML:

    <div id="outer">
       <img id="img1" class="bgndimg out" src="http://i.imgur.com/3KZlvif.jpg?1"></img>
       <img id="img2" class="bgndimg out" src="http://i.imgur.com/LCjgi.jpg"></img>
    </div>

JS:

    $('#outer').hover(function() {
       $('#img1,#img2').toggleClass('over',[15000]).toggleClass('out',[15000]);
     });

http://jsfiddle.net/9eJVS/1/

edited Jun 12 '13 at 22:05

answered Jun 12 '13 at 20:01

Joe

25,000
3
22
44

Can you elaborate on which part of jquery UI would be applicable? – James Montagne Jun 12 '13 at 20:03
see the doc for [.addClass](http://api.jqueryui.com/1.9/addClass/) you use jQuery('.viewport').addClass('viewporthome',[duration in ms]); jquery ui adds an explicit element style and animates the change – Joe Jun 12 '13 at 20:11
From the docs: "Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation." – James Montagne Jun 12 '13 at 20:23
I should learn to read the questions better. If you want to change the style of the background separately from the content it needs to be a separate selectable element. – Joe Jun 12 '13 at 22:16

score 0 · Accepted Answer · answered Jun 12 '13 at 20:26

Just chain the events. To fade the div in, do the following:

jQuery('nav .home a').mouseover(function(){
    jQuery('.viewport').hide().addClass('viewporthome').fadeIn(500);
  });

To get the same effect on mouseout, use a callback function:

jQuery('nav .home a').mouseout(function(){
    jQuery('.viewport').fadeOut(500, function(){ 
        //this is the callback function and runs after div fades out
        $(this).removeClass('viewporthome');
     });
  });

DEMO: http://jsfiddle.net/dirtyd77/Q4wK5/

Is it possible to add a jQuery fadeIn function to a css change?

2 Answers2