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页面并分享。我会告诉你我在这里要做什么。基本上，我告诉它将大小增加300％（假设它在时间点为100％），而不是告诉jQuery将大小调整为400％。如果不是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>')
});

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

1 个答案: