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

发布于 2024-07-23 02:51:36 字数 332 浏览 9 评论 0原文

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

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

谢谢!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

绝不放开 2024-07-30 02:51:36

如果您有一个类似 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);
            }
        }
    });

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);
            }
        }
    });
空心↖ 2024-07-30 02:51:36

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

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

Cufon 字体生成器

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

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

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 https://github.com/sorccu/cufon/wiki

彼岸花ソ最美的依靠 2024-07-30 02:51:36

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

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.

最好是你 2024-07-30 02:51:36

尝试使用 make

#content {
style=display:none
} 

而不是 visibility=hidden

Try making

#content {
style=display:none
} 

instead of visibility=hidden

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文