在 jQuery 中调整动画图像的大小

Question

我正在处理一个HTML/CSS/jQuery文档，其中一部分涉及一个洪水的图像，它短暂移动，然后膨胀以填满屏幕，直到它被点击，此时它恢复到原来的大小并淡入背景。它按预期移动，单击时行为正常，并且大部分情况下可以正确调整大小。

我的问题是，在它成长之前，它就消失了。至少，我认为它正在消失。它最初可能会调整自己的大小以0x0。无论如何，我无法弄清楚从图像的正常大小开始调整大小的语法。

有一些代码！在上下文中，这是一系列图像的一部分，随后单击这些图像以获得各种效果。为了记录，第二个 .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>')
});​

Answer 1

试试这个，告诉我。你能制作一个jsfiddle页面并在它不起作用时分享吗？我会告诉你我在这里想做什么。基本上，我不是告诉jQuery将大小设置为400%，而是告诉它将大小增加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>')
});​