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

时间:2009-06-04 19:52:42

标签: jquery sifr

这就是我目前所拥有的:

// #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中测试。

谢谢!

4 个答案:

答案 0 :(得分:1)

我知道这并没有回答你关于sIFR的问题,但我刚刚使用一种名为Cufon的不同字体替换技术测试了fadein。一切都很好用,在元素的CSS中设置显示为none(不理想,仅用于测试)然后让jQuery淡入。

Cufon是“使用画布和VML快速替换文本 - 无需Flash或图像。”

Cufon Font Generator

希望有帮助,我在发现这个工具后停止使用sIFR进行字体替换,仍有一些问题要解决,但看起来非常好。

更多信息请访问http://wiki.github.com/sorccu/cufon(对不起,新用户只能发布1个链接)

答案 1 :(得分: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);
            }
        }
    });

答案 2 :(得分:0)

如果你让Flash电影变得透明可能会有所帮助,但一般来说,我认为这不会起作用。 Flash和HTML / CSS的难度。

答案 3 :(得分:0)

尝试制作

#content {
style=display:none
} 

而不是visibility=hidden