1

受我昨天读到的一篇文章的启发,我正在努力在我的投资组合网站上添加一个 Konami 代码诱导的复活节彩蛋。一开始还挺有趣的,但是当 IE 参与进来时,一个看似很简单的任务却变成了一种痛苦!

使用出色的jqPuzzle 插件,其想法是在用户输入代码时,页面内容会淡出,并被以前不可见的交互式滑块拼图所取代。我正在使用的插件通过类值将自身应用于页面上的图像。这里是它开始变得棘手的地方:(大概)因为加载插件需要一点时间,并且因为插件只在图像可见时加载,所以我把下面的 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 加载“不可见”?

4

2 回答 2

0

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

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

如果您不需要对此进行褪色处理,我不会感到惊讶。

于 2011-06-08T14:16:03.880 回答
0

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

shuffle: true

于 2011-06-08T14:24:40.067 回答