Slowing Fade effect using Featured Content Slider v2.4

[thedesigndept]

1) Script Title: Featured Content Slider v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem: Is there a way to slow down the fade between text blocks? I can easily set the length of time a div stays visible, but want a nicer, slower transition between text divs. Here's an example:

http://shortlands.co.uk/shortlands_2012/index.html

The transition is just a little too fast for me.

Thank you,
Marita

[jscheuer1]

Go with a lower value for enablefade:


enablefade: [true, 0.1], //[true/false, fadedegree]

That's the increment of change. Each increment takes 50 milliseconds. At 0.5 it takes just two increments (100 milliseconds) to go from 0 to 1. At 0.1, ten increments (500 milliseconds - half a second) are required.

I suppose you could even try 0.05, which would require 1000 milliseconds (one second). Or 0.02, that will make it a really gradual transition.

Also, in the contentslider.css file, you need background and full width for the content divisions. Otherwise the transitions suffer from bleed through and look messy. Add the highlighted as shown:


.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
/* [disabled]background: white; */
/* [disabled]width: 390px; */ /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
width: 100%;
background: url(images/bg.jpg) -57px -561px #252525;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}