javascript - 在 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>')
});​