IE

2011-06-08 188 views
1

jQuery fadeTo错误的一个变种受我昨天读的文章的启发,我努力将一个Konami代码诱导的复活节彩蛋添加到my portfolio website。它起初有点儿有趣,但是,当IE介入时,一个看起来很简单的任务就变成了一种不幸的事情!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加载“无形”?

回答

0

所有你需要的是添加此选项可立即将它洗:

shuffle: true

+0

唉,在IE中出现同样的切入点:[link](http://www.chrisphilpot.co.uk/index_fixes2.html) – 2011-06-08 14:36:24

+0

如果你想要做的只是保持隐藏,你可以添加这个CSS :'知名度:隐藏'这是否适合你? – js1568 2011-06-08 15:19:47

+0

啊哈!我想我已经尽可能接近在IE中工作了。解决方法是将#eegg DIV设置为visibility:隐藏,如同建议的那样,但不透明度设置为0(通过[quirksmode.org](http://www.quirksmode.org/css/opacity.html))。然后,在旧的^^ VV <><> BA上,以下运行: '$('#eegg').css(“visibility”,“visible”)。fadeTo(600,1);' 快乐的日子,我的很多谢谢你在成功之路上的帮助! – 2011-06-08 18:16:58

0

你是一个失败者,设置了类名,并等待插件接收它。你会做只是为了更好地使用jQuery的语法难题:

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

如果你没有需要做的衰落与此它不会让我感到吃惊。

+0

除非我犯了一个错误,我没有看到的改进很大:[链接](HTTP: //www.chrisphilpot.co.uk/index_fixes.html)为什么现在忽略了我不知道的z-index! :-S – 2011-06-08 14:32:28

+0

@Chris:难道你只是在屏幕上出现难题时才初始化它?并且使用webkit的检查器,没有'z-index'让它忽略!我假设插件添加它。 – Eric 2011-06-08 16:23:26