IE中jQuery fadeTo错误的变种

时间:2011-06-08 14:06:52

标签: jquery hide fadeout fadeto

受到我昨天阅读的一篇文章的启发,我正在努力将一个由Konami代码引发的复活节彩蛋添加到my portfolio website。它开始时有点乐趣但是,当IE涉及到这种情况时,一个看似非常简单的任务已成为一种痛苦!

使用优秀的jqPuzzle plugin,我们的想法是,当用户输入代码时,页面内容会淡出并被之前不可见的交互式滑块拼图所取代。我正在使用的插件通过类值将自身应用于页面上的图像。这里开始变得棘手:(大概)因为加载插件需要一点时间,并且因为插件仅在图像可见时加载,所以我将以下jQuery放在一起隐藏图像,淡入淡出它会在不知不觉中让插件有机会加载,然后再将图像淡出:

<div id="eegg">
    <img src="images/photo_name.jpg" />
</div>

...

<script type="text/javascript">
    $( init );
    function init() {
        $('#eegg img').addClass( 'jqPuzzle jqp-r3-c4-NC' ); //Puzzle settings
        $('#eegg').hide().fadeTo( 'slow', 0.000001 ).fadeOut( 'slow' );
        $('#eegg img').addClass( 'positioned' ); //Centres puzzle in browser
    }

唉,虽然这个小小的解决方法在Firefox和Chrome中很好地实现了它的目的,IE 7和8忽略了淡入淡出的指令,只是在完全不透明的情况下将图像丢弃,然后片刻之后删除它。真气!

任何人都可以向我提供有关如何哄骗IE褪色的任何指导吗?

或者,有没有更好的方法来强制滑块JS加载'隐形'?

2 个答案:

答案 0 :(得分:0)

你是一个失败者,设置类名,并等待插件接收它。你最好只使用jQuery语法来解决难题:

$('#eegg img').jqPuzzle({
    rows: 3,
    cols: 4,
    numbers: false,
    controls: {
        toggleNumbers: false
    }
});

如果你不需要对此褪色,我不会感到惊讶。

答案 1 :(得分:0)

您只需添加此选项即可立即对其进行随机播放:

shuffle: true