I got the following:

<http://jsfiddle.net/GsL8Z/>

I want to toggle the size of an image. After each toggle, I want to replace the scaled image with its instance in right size.

This actually works pretty well, but only the first time. After the third click, the wrong class gets allocated.

Any help would be greatly appreciated!

HTML

```
<div id="projekt_1" class="projekt">
<ul class="bilder">
<li><img class="imgKlein" src="images/mainworks_th.jpg" alt="Mainworks"/></li>
</ul>
</div>​

```

CSS

```
.imgGross{
    height: 450px;
}

.imgKlein{
    height: 215px;
}​

```

JS

```
var status = true,
    obj = $('.projekt'),
    projekte = $.makeArray(obj),
    obj = $('.bilder'),
    projekte_li = $.makeArray(obj),
    obj = $('.projekt li img'),
    projekte_li_img = $.makeArray(obj);

var images = new Array (2);
images[0] = $('<img class="imgKlein"/>').attr({src: 'images/mainworks_th.jpg'});
images[1] = $('<img class="imgGross"/>').attr({src:'images/mainworks_pre.jpg'});

$('#projekt_1').click(function() {
    if (status == true) {
        $("img", this).switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad" );
        setTimeout(function(){
            $(projekte_li[0]).html(images[1]);
        }, 2000);
        status = false;
    }
    else {
        $("img", this).switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad" );
        setTimeout(function(){
            $(projekte_li[0]).html(images[0]);
        }, 2000);
        status = true;
    }
    return false; 
});

```