如何使用 jQuery 使 sIFR 替换的元素淡入？

Question

这就是我目前所遇到的情况：

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

淡入发生，但在被隐藏之前的一瞬间，替换的 Flash 影片出现了。 有人让它发挥作用吗？ 我正在使用 jQuery 1.2.6 和 sIFR 3 r436。 在 Safari 4 和 FF 3 中测试。

谢谢！

Answer 1

如果您有一个类似 SIFR 的项目列表，则将其替换为：

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

JQuery 将如下所示：

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);
            }
        }
    });

Answer 2

我知道这并不能回答您关于 sIFR 的问题，但我刚刚使用一种称为 Cufon 的不同字体替换技术测试了淡入淡出。 这里一切都很好，在元素的 CSS 中将显示设置为无（不理想，仅用于测试），然后让 jQuery 淡入。Cufon

是“使用画布和 VML 进行快速文本替换 - 不需要 Flash 或图像”。

Cufon 字体生成器

希望有帮助，在发现这个工具后我停止使用 sIFR 进行字体替换，仍然有有几个问题需要解决，但看起来确实不错。

更多信息请点击这里 https://github.com/sorccu/cufon/wiki

Answer 3

如果您使 Flash 影片透明，可能会有所帮助，但一般来说，我认为这不会起作用。 Flash 和 HTML/CSS 的难度。

Answer 4

尝试使用 make

#content {
style=display:none
} 

而不是 visibility=hidden