How can you use jQuery to make sIFR-replaced elements fade in?

Question

This is what I currently have:

// #content is visibility=hidden
sIFR.replace(mix_bold, {
  selector: '#content p',
  onReplacement: function(fi) {
    $('#content').fadeIn("slow");
  }
});

The fade in happens, but for a split second the replaced flash movie appears before being hidden. Has anyone gotten this to work? I am using jQuery 1.2.6 and sIFR 3 r436. Tested in Safari 4 and FF 3.

Thanks!

Answer 1

I know this doesn't answer your question about sIFR, but i've just tested the fadein using a different font replacement technique called Cufon. All works great here, setting display to none in the CSS on the element (not ideal, just for test) then getting jQuery to fade in.

Cufon is "Fast text replacement with canvas and VML - no Flash or images required."

Cufon Font Generator

Hope that helps, i stopped using sIFR for font replacement after discovering this tool, still has a couple of issues to iron out but looking really good.

More info here http ://wiki.github.com/sorccu/cufon (sorry, new user so can only post 1 link)

Answer 2

It may help if you make the Flash movie transparent, but generally, I don't think this will work. Difficulty of Flash and HTML/CSS.

Answer 3

Try making

#content style=display:none instead of visibility=hidden

Answer 4

If you have a list of items like that are SIFR replaced this:

<ul class="slogan-list">
<li>...</li>
</ul>

The JQuery would be something like this:

var jQu = jQuery.noConflict();

jQu('ul.slogan-list').each(function(){
        var _hold = jQu(this);
        var _list = _hold.children();
        var _t, _f = true;
        var _a = (_list.index(_list.filter('.active:eq(0)') != -1))?(_list.index(_list.filter('.active:eq(0)'))):(0);
        _list.removeClass('active').css('opacity', 0).eq(_a).addClass('active').css('opacity', 1);
        if(_f && stay_time){
            _t = setTimeout(function(){
                if(_a < _list.length - 1) changeEl(_a + 1);
                else changeEl(0);
            }, stay_time);
        }
        function changeEl(_ind){
            if(_t) clearTimeout(_t);
            if(_ind != _a){
                _hold.stop().height(_hold.height());
                if(jQu.browser.opera){
                    _list.eq(_a).removeClass('active').css('opacity', 0);
                    _list.eq(_ind).addClass('active').css('opacity', 1);
                }
                else{
                    _list.eq(_a).removeClass('active').animate({opacity: 0}, {queue:false, duration: change_speed});
                    _list.eq(_ind).addClass('active').animate({opacity: 1}, {queue:false, duration: change_speed});
                }
                _hold.animate({height: _list.eq(_ind).outerHeight()}, change_speed/2, function(){ jQu(this).height('auto');});
                _a = _ind;
            }
            if(_f && stay_time){
                _t = setTimeout(function(){
                    if(_a < _list.length - 1) changeEl(_a + 1);
                    else changeEl(0);
                }, stay_time+change_speed);
            }
        }
    });