Resizing an animated image in jQuery

I'm working on an HTML/CSS/jQuery document, and part of it involves an image of a flood that moves briefly, and then swells to fill the screen until it gets clicked, at which point it reverts to its original size and fades into the background. It moves as it should, behaves properly when clicked, and mostly resizes properly.

My problem is that before it grows it disappears. At least, I think it's disappearing. It might be initially resizing itself to 0x0. At any rate, I can't figure out the syntax to have the resizing simply begin from the image's normal size.

Have some code! In context, this is part of a series of images which are subsequently clicked for various effects. For the record, the 'left:"20"' bit in the second .animate() is to create the illusion of the flood staying in place. That much is doing what it should. Also, because of the requirements for this project, raw javascript is to be avoided to the extent possible (but, if it's not possible, gotta do what I gotta do I suppose).

$("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>')
});​

Answers


Try this out and tell me. Can you make a jsfiddle page and share if it does not work. I will tell you what I am trying to do here.Basically, rather than telling jQuery to make the size 400%, I am telling it to increase the size by 300%(Assuming it is at 100% at the point of time).If it is not at 100% change the value 300 accordingly.

$("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>')
});​

Need Your Help

Trouble with TableCellEditor and JComboBox

java swing jcombobox tablecellrenderer tablecelleditor

I'm trying to get a jtable to contain combo boxes for one of it's columns but it doesn't work, it just appears as a normal table cells. at the moment i'm following oracle's example: http://docs.ora...