1

私は HTML/CSS/jQuery ドキュメントに取り組んでいます。その一部には、短時間移動する洪水の画像が含まれており、クリックされるまで画面いっぱいに膨らみ、クリックされると元のサイズに戻ってフェードします。背景に。必要に応じて移動し、クリックすると適切に動作し、ほとんどの場合適切にサイズ変更されます。

私の問題は、成長する前に消えてしまうことです。少なくとも、私はそれが消えていると思います。最初は 0x0 にサイズ変更されている可能性があります。とにかく、サイズ変更を画像の通常のサイズから開始するための構文がわかりません。

コードを用意してください。コンテキストでは、これは一連の画像の一部であり、後でクリックするとさまざまな効果が得られます。記録のために、2 番目の .animate() の 'left:"20"' ビットは、洪水がその場にとどまっているように見せるためのものです。それはそれがすべきことをしているということです。また、このプロジェクトの要件により、生の JavaScript は可能な限り避ける必要があります (しかし、それが不可能な場合は、私がしなければならないことをしなければならないと思います)。

$("img#window").click(function() {
    $(this).replaceWith('<img id="window" src="../Kafka/chain 3/window_bw.png" style="opacity:0.35;filter:alpha(opacity=35);z-index:5;">');
    $("img#flood").show().animate({
        left: "160"
    }, 2500, function() {
        $("img#flood").animate({
            left: "20",
            width: "400%",
            height: "400%"
        }, 20000)
    });
    $("span#three").replaceWith('<span class="text" id="three">Flood</span>')
});

$("img#flood").click(function() {
    $(this).replaceWith('<img id="flood" src="../Kafka/chain 3/flood_bw.png" style="opacity:0.35;filter:alpha(opacity=35);z-index:5;">');
    $("img#stranger").show();
    $("span#three").replaceWith('<span class="text" id="three">Stranger</span>')
});​
4

1 に答える 1

0

これを試して教えてください。動作しない場合は、jsfiddle ページを作成して共有できますか。ここで何をしようとしているのかをお伝えします。基本的には、サイズを400%にするようにjQueryに指示するのではなく、サイズを300%増やすように指示しています(その時点で100%だと仮定)。 100% でな​​い場合は、それに応じて値を 300 に変更します。

$("img#window").click(function() {
    $(this).replaceWith('<img id="window" src="../Kafka/chain 3/window_bw.png" style="opacity:0.35;filter:alpha(opacity=35);z-index:5;">');
    $("img#flood").show().animate({
        left: "160"
    }, 2500, function() {
        $("img#flood").animate({
            left: "20",
            width: "+=300%",
            height: "+=300%"
        }, 20000)
    });
    $("span#three").replaceWith('<span class="text" id="three">Flood</span>')
});

$("img#flood").click(function() {
    $(this).replaceWith('<img id="flood" src="../Kafka/chain 3/flood_bw.png" style="opacity:0.35;filter:alpha(opacity=35);z-index:5;">');
    $("img#stranger").show();
    $("span#three").replaceWith('<span class="text" id="three">Stranger</span>')
});​
于 2012-06-23T18:57:16.847 に答える