View Full Version : Jquery fade - problem with text

Nov 17th, 2010, 03:03 AM

This must be a 1st.

It works ok in IE...But not in Firefox?

I need to use white text over a dark bg color or if possible over an image.
The problem is in FF the white text distorts on fade

The black text works ok when adding the white bg.

See my test code below. (It can be copied straight in to test)

If anyone could please take a quick look and give some pointers.

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<style type="text/css">
#welcomebanner img {border: none;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;

function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){


function over(){

function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);

$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);




<div id="wrapper">

<ul id="welcomebanner">


<h2>testing the text fade</h2>
<p>testing the text fade</p>



<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>




Nov 21st, 2010, 10:12 PM
Still searching for help on this Firefox problem?

Just to make it clearer;

The problem is I am using white text on a dark background,
when it fades in/out the text distorts.

The black text is ok.