CODEWITHSUNDEEP
jquery
Jush Ov
Jush Ov

Reputation: 11

jQuery animated resize on click?

I'm trying to resize a image from one of my Divs but they all end up resizing but not in order.

How can i make sure they do it individually? Also, how can I do something when on click the picture will go to its original size?

Here's my HTML:

<img class="i1" border="0" src="Main Picture Gallery/1.JPG" alt="Edge Hill near lake" width="204" height="153" />
<img class="i2" border="0" src="Main Picture Gallery/2.JPG" alt="Edge hill libary" width="204" height="153" />

Here's my jQuery:

<script src="jquery.js"> </script>
<script>    
$(document).click(function() {
    $(".i1, .i2").animate({height:'612'})
    $(".i1, .i2").animate({width:'816'})
});         
</script>

Upvotes: 1

Views: 839

Answers (2)

Mathew Thompson
Mathew Thompson

Reputation: 56439

Few things.

First, you're attaching your click to document, it should be $(".il, .i2").click.

Next, in order to animate them individually, use the callback function of animate to ensure one has completed before the other starts.

Try this:

$(".i1, .i2").click(function() {
    $(".i1").animate({height:'612', width: '816'}, 1000, function () {
        $(".i2").animate({height:'612', width: '816'});
    });
});

DEMO

Upvotes: 0

adeneo
adeneo

Reputation: 318302

$(function() {
    $(".i1, .i2").on('click', function() {

        var h = $(this).height();
        $(this).animate({
            height: (h < 600 ? 612 : 153), 
            width : (h < 600 ? 816 : 204)
        });
    });
});

FIDDLE

Upvotes: 1

Related Questions