Anything Slider Help, Change Animation to Fade

[maeker]

Hello,

I am using CSS Trick’s anything slider on a wordpress blog, and it works great! However, I would like to change the animation from a slide to a fadein/out. I know the script is powerful because of how it is able to arrange the elements and slide through them, but based on the context in which I am using it, I need it to fade. I would search for a simple fadein/out gallery, but the anything slider has many other benefits, the counting posts with mini links, the start/stop and stop on hover, etc…, I do not want to delete it entirely, I am just looking to change the animation. I know some jquery, but looking at the script file, it is far too complex for what I know. Any/all help is much appreciated!

Here is a link to the example page for anything slider.
http://css-tricks.com/examples/AnythingSlider/

Thanks in advance.

[Chris Coyier]

This is NOT really ready for mass public consumption yet, but if you need to get going right away, I’ve been tinkering with just that idea here:

https://css-tricks.com/examples/AnythingFader/

The problem is the fader will be much simpler, and currently this is just a quick hack to get it done. For example, it still lines all the slides up in a row and clones the first and last and all that, which will not be necessary in the final version.

[TheDoc]

Nice, Chris!

Looking forward to the finished product.

[maeker]

Hey Chris, Sorry for the delayed reply, apparently I got the flu the day after I wrote that post and I am just getting back in the loop. Anything Fade was EXACTLY what I was looking for! Can’t thank you enough for your help.

[lacylouwho]

HI – Love the fader – definitely more what I was looking for :) A little less jarring than the sliding :)

Question … I altered the css a bit to have some smaller back and forward buttons — butnow they aren’t working. They display … but they don’t function (and the hover doesn’t work either). They’re 4 buttons in a sprite — individual buttons are 15px by 21 px.

Code:

.anythingFader .arrow { display: block; height: 15px; width: 21px; background: url(../images/playbuttons.jpg) no-repeat 0 0; text-indent: -9999px; position: absolute; bottom: -18px; cursor: pointer; }
.anythingFader .back { background-position: 0px 0px; left: 413px; }
.anythingFader .back:hover { background-position: 0px -16px; }
.anythingFader .forward { background-position: -21px 0px; right: 17px; }
.anythingFader .forward:hover { background-position: -21px -16px; }

Am I missing something?

Thanks for sharing this slider/fader :)

[lacylouwho]

Sorted this out… here is my updated CSS …

Code:

.anythingFader .arrow { display: block; background: url(../images/playbuttons.png) no-repeat 0 0; text-indent: -9999px; cursor: pointer; height: 15px; width: 20px;}
.anythingFader .back { position: absolute; background-position: 0px 0px; left: 455px; top: 380px; }
.anythingFader .back:hover { background-position: 0px -14px; }
.anythingFader .forward { position: absolute; background-position: -30px 0px; left: 495px; top: 380px; }
.anythingFader .forward:hover { background-position: -30px -14px; }

It’s great to be able to shrink down those huge previous / next arrows – and have standard play, pause, forward back buttons! Yay!

[andieevans]

Just a quick observation:

in ie8 the fade does not happen, the images just flick from one to another.

Cheers

[upekshapriya]

Looking forward to seeing your final version of AnythingFader :-)

However it would be great if the slides faded from one to the other without a fade to white in between – as does the Jquery Fader Plugin by Philip Floetotto http://philipf.alphacomplex.org/plugins/fader/demo.html (that one unlike yours doesn’t have a pause while hovering function or a start/stop button both of which are extremely useful – plus isn’t being developed any more).

[sjferwerda]

For those having issues with IE8 fading correctly, I found the solution by looking at this post:

http://www.mail-archive.com/[email protected] … 88321.html

Basically, all you have to do is remove the absolute positioning CSS rule that Chris added to:
#.anythingFader .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }

In my instance, I changed it to:

#.anythingFader .wrapper ul { width: 9999px; list-style: none; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }

I think "position: absolute; top: 0; left: 0;" may be redundant regardless and in my case it did not break anything else.

[mat]

Yea, seems to have worked fine now.
Double check that you dont have any previously nested styles that may be positioning an ul or li element relative /absolute.

For instance i had previously used something like:

Code:

#rightcol ul { position: relative}
#rightcol ul li { position: relative}

So if you are still not seeing the animation make sure u havn’t got styles like that forcing the child ul lis to position themselves relative!

[Terrabilata]

I’m using this current version of the AnythingFader on a WordPress site and for some reason it gets stuck on the second frame. Even when clicking the navigation to jump to another slide it’ll load for a second then go right back to the second frame.
Here is the page: http://identitypr.com/14962-tri-land-cherokee-south/

Any thoughts on how I screwed this up?

[Terrabilata]

Please?

[videobored]

Chris, I just wanted to give you a huge pat on the back for all the fantastic work you have done with AnythingSlider and now the fader version. I’ve used the slider on a couple of projects now, and it is a dream to work with. I have just used your prototype fader version to update one of those installations (at the clients request) and even though it is not the final version, it so far appears to work just great.

Thanks so much, and please continue to develop this and other useful tools.
-Nathan

[bluoma]

Can anyone help me with controlling AnythingFader externally? I want to put some interactive content within my slides but I want anythingfader to stop playing on user interaction.

[mlassiter]

Has the final version of AnythingFader been released?

[Author]

Posts