1

我正在处理一个 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>')
});​
4

1 回答 1

0

试试这个并告诉我。如果它不起作用，您可以制作一个 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>')
});​
于 2012-06-23T18:57:16.847 回答