在两个未知值之间切换JQuery动画

Question

I have an image that starts out on the page at a half of its original size. When the image is clicked, it should expand to this original size. When clicked again, it goes back to its half size.

I found this JQuery code to toggle the size of an element between two sets of sizes:

$('.expandable').click(function() {
    var size = [];
    $(this).width() >= 896 ? size = [448, 221] : size = [896, 211];
    $(this).stop().animate({width: size[0], height: size[1]}, 'slow');
});

This code works perfectly — as long as you know the original size of the image. Being an abstraction-minded guy, I set out to try and make this as dynamic as possible. I found that, in HTML5, there are naturalWidth and naturalHeight attributes for images. So I put this into the code:

$('.expandable').click(function() {
    var size = [];
    $(this).width() >= $(this).naturalWidth ? size = [$(this).naturalWidth / 2, $(this).naturalHeight / 2] : size = [$(this).naturalWidth, $(this).naturalHeight];
    $(this).stop().animate({width: size[0], height: size[1]}, 'slow');
});

Of course, $(this).naturalHeight and $(this).naturalWidth both showed that they were undefined when run through a console.log() (I also tried using them as if they were accessor methods, eg $(this).naturalHeight() , but the console reported that TypeError: $(...).naturalWidth is not a function ).

I could easily get a list of all the sizes of images on the page, but I am at a loss as to how I would identify which image is which on the page. Maybe as I collect the sizes, I could assign numeric IDs?

So, the question: How do I toggle the animation between the original size of an image and half of the image's size in an easily expandable way?

Note: tests were run on the latest version of firefox.

Another note: a lot of answers I've seen say to use the $(...).toggle() event, but the JQuery API documentation says that this is deprecated , and that we should use the $(...).toggle() function instead, which toggles the visibility of an element only, and would therefore be inadequate.

Answer 1

qtgye's code was almost right, but it caused the image to start at its full size, instead of its half size. With this in mind, a colleague of mine pointed out that I could just do the same in reverse:

$('.expandable').each(function() {
    var w = $(this).width();
    var h = $(this).height();
    $(this).click(function() {
        $(this).animate({
            width: ($(this).width() == w ? w * 2 : w),
            height: ($(this).height() == h ? h * 2 : h)
        });
    });
});

Note that instead of dividing the size by two, I now multiply it by two. Also note that width and height are variables within $(...).animate() , and not strings.

Answer 2

You can try something like this one: fiddle

$('.expandable').each(function(){
    var s = $(this).width();

    $(this).click(function(){
        $(this).animate({
            'width' : ($(this).width()==s?s/2:s)
        });        
    });
});