fade in an active class

Hi all,
here is a link to my development page http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-width.html.
The full width slider works fine.

When a next arrow is clicked an active class (dpui-ws-active") is applied which changes the opacity of the text from 0 to 1. I would like to fade in this action as oposed to making it simply appear. Can anyone assist?

The add class happens on line 350 of jquery.ui.dpui.wideScroller.js.
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
let's start with this.

remove the class:

.dpui-ws-active, .dpui-ws-active p {
opacity: 1 !important;
}

Open in new window

Add these lines to the js
activeItem.removeClass(ws_activeItemClass);

// add this line:
activeItem.find("p").stop().animate({"opacity":0}, {duration:500});

self.nextItem.addClass(ws_activeItemClass);

// add this line:
self.nextItem.find("p").stop().animate({"opacity":1}, {duration:500});

Open in new window

add this to your onload function:
$("p.dpui-ws-active").css({"opacity":1});
like this:
<script type="text/javascript">
        // Instantiate wide scroller with no options - this is a basic example
        $(function() {
            $("p.dpui-ws-active").css({"opacity":1});
            $("#scroller").wideScroller();
        });

    </script>

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
you could change the follwing two lines :

activeItem.removeClass(ws_activeItemClass);
self.nextItem.addClass(ws_activeItemClass)

to:

activeItem.stop().animate({"opacity":"0"});
self.nextItem.stop().animate({"opacity":"1"});
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi kozaiwaniec,
the suggestion looked promising however when applied, the slider went a little out of whack.
 I have mocked up your suggestion here http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-widthEE.html.

I thought that is might work but no luck:
 self.nextItem.addClass(ws_activeItemClass).fadeIn("slow");

Cheers,
N
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Kyle HamiltonData ScientistCommented:
sorry i was rushing. those two lines are not what controls that though. i'll have another look later - cant do it right now.
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Cheers, essentially its the green text box that I looking at fading in..
N
0
 
Kyle HamiltonData ScientistCommented:
so the way the text item is done is this:

When an item is active, the active class is added to it via javascript. Then, in the css file, the text (p element) is assigned opacity:1 by virtue of being a child of the active class.

So it's not the active class that you want to fade, but the opacity of the p element that is a chil of the active class.

There a re a couple of ways to do that. the easiest would be to use CSS3 transitions, but this would not work in IE<9

The ther way is to remove the p (child) element from the css, and add the fade animation to to the javascript.

which would you prefer?
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi kozaiwaniec,
you have hit the nail firmly on the head.
To to remove the p (child) element from the css, and add the fade animation to to the javascript would be the preferred solution.
Cheers,
N
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Beautiful!
http://gromit.utopia.co.nz/~bhadmin/jquery/full-width-scroller/full-width.html
Before I close this question out, how easy would it be to make the first "text heading" visible when the page first loads?
Cheers,
N
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
If I could grade this answer an A++ I would.
Thanks for a superb solution.
Cheers,
Neil
0
 
Kyle HamiltonData ScientistCommented:
:)

I noticed you didn't do the last step. To make that first text box visible you need to add that line in the onload function per the post. It is in the head of your html file. Does that make sense?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.