sIFR 3 与 jQuery Cycle 插件兼容吗？

Question

我是一个新手，我已经为此苦苦挣扎了一段时间。我尝试使用 jQuery Cycle 插件创建一个滚动 div，并在滚动 div 中包含 sIFR 3 文本。我可以让它在 Firefox 中正常工作，仅此而已。任何建议或帮助将不胜感激！

这是我的链接：http://dev.bandspecial.com/test.html

jQuery：

$(document).ready(function() {
$('#slideshow').cycle({
    fx: 'scrollLeft',
    cleartypeNoBg:  true
});
});

sIFR :

sIFR.replace(rockwell, {
 selector: 'h1',
      css: [ '.sIFR-root { color:#ffffff; }' ,'a { text-decoration: none }' ,'a:link { color: #E31824 }' ,'a:hover { color: #E31824 }' ], wmode: 'transparent'
    });

正文代码:

<div id="slideshow">
  <div> <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" height="200" width="200">
    <h1>St Andrews State Park - Panama City, FL</h1>
    <p>This park is one of the most popular outdoor recreation spots in Florida. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" height="200" width="200">
    <h1>Located in the Florida panhandle,</h1>
    <p> the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" height="200" width="200">
    <h1>The ocean provides opportunity for endless fun. </h1>
    <p>From boogie boarding to snorkeling to  swimming and boating, there is always something to do.</p>
  </div>
</div>

Answer 1

我稍微调整了汤姆的代码。虽然他的代码对我有用，但它在（淡入淡出）效果后明显呈现了 sifr。使用 before 和显示块，sifr 在效果之前渲染，以获得更理想的结果。

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        before: function(){
            $(this).css({ 'display': 'block' })
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
       }
    });
});

Answer 2

我使用 Innerfade Jquery 插件，因此更改可能会略有不同。

这是我所做的：

Innerfade 使用 .hide() 隐藏列表中的所有项目。这就是问题的根源。
解决方案：不要让您的插件使用 .hide()，而是使用 .addClass("hide") 并定义 CSS position:absolute;左：-10000px。

使用这种方法。 .removeClass("hide") 将使您的帖子再次出现。除此之外，如果您使用淡入淡出或幻灯片等效果，也不要忘记removeClass。

我希望这是有道理的。顺便说一句：我正在使用 SIFR 3

Answer 3

如果您尝试滚动以显示隐藏的 div：none;页面加载时，sifr 不会替换该文本。

Answer 4

每次转换完成后，我使用 jquery 循环选项“after”调用 sIFR 函数：

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        after: function(){
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
        }
    });
});