1

昨日読んだ記事に触発されて、コナミコマンドで誘発されたイースターエッグをポートフォリオのウェブサイトに追加しようと努力しています。最初は少し楽しかったですが、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 に答える