Add fadeIn/fadeOut to add/remove class

Question

The below code changes the orientation of my navigation by adding/removing a class name. How can I make it fade in and out when the orientation occurs? Here's my code:

$(window).scroll(function() {
    ($("#another-reason-to-attend").offset().top <= window.pageYOffset) ? $("#prim").addClass("horizontal") : $("#prim").removeClass("horizontal");
    ($("#another-reason-to-attend").offset().top <= window.pageYOffset) ? $("#logo").addClass("small") : $("#logo").removeClass("small");
});

EDIT

I've tried adding .fadeIn and .fadeOut to the lines above but it just breaks.

Example:

 ($("#another-reason-to-attend").offset().top <= window.pageYOffset) ? $("#prim").addClass.fadeIn("horizontal") : $("#prim").removeClass.fadeOut("horizontal");

[What have you tried](http://whathaveyoutried.com)? – Cat Mar 23 '13 at 17:15 — Cat, Mar 23 '13 at 17:15

bipen · Answer 1 · 2013-03-23T17:32:19.860

0

not sure what are you trying to fadeIn and fadeOut.. asuming this is what you want

try this

 ($("#another-reason-to-attend").offset().top <= window.pageYOffset) ? $("#prim").addClass("horizontal").hide().fadeIn() : $("#prim").removeClass("horizontal").fadeOut();
  ...

since fadeIn() works only for hidden elements, hide it is first(if not hidden )

edited Mar 23 '13 at 17:32

answered Mar 23 '13 at 17:19

bipen

36,319
9
49
62

I'm trying to fade in #prim and #logo – egr103 Mar 23 '13 at 17:27
if your are trying to fadeIn after adding the class.. then above answer should work.. – bipen Mar 23 '13 at 17:31
Yes it does but because its within a scroll function, the elements keeping hiding and showing depending if you scroll or not – egr103 Mar 23 '13 at 17:36

Add fadeIn/fadeOut to add/remove class

1 Answers1