switchClass() swaps class after 3rd click - image

Question

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;
});

Answer 1

Somehow the switchClass is having problems with you replacing the whole html for the img. As a matter of fact you can just change the src.
Also, you are better off using .toggle() in jQuery to handle things changing back and forward on each click.
By the way, also the setTimeout can give problems. .switchClass() has a complete handler that runs after the animation is complete and you should use that.
So, the solution could be:
$('#projekt_1').toggle(
function(e) {
$("img", this).switchClass("imgKlein", "imgGross", 1000, "easeInOutQuad",
function() {
$(this).attr({ src: 'images/mainworks_pre.jpg', alt: "Mainworks_pre" });
});
return false;
},
function (e) {
$("img", this).switchClass("imgGross", "imgKlein", 1000, "easeInOutQuad",
function(){
$(this).attr({ src: 'images/mainworks_th.jpg', alt: "Mainworks_TH" });
});
return false;
}
);
Fiddle: http://jsfiddle.net/GsL8Z/2/

Answer 2

i testet something with the example from jquery-ui and it works
the code is little bit shorter than yours:
$(function() {
$( "#projekt_1" ).click(function(){
$(".imgKlein").switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://www.spielwiki.de/images/e/e9/Kleines_M%C3%A4dchen%2C_zu_gro%C3%9Fer_Luftballon.png");
});
$(".imgGross").switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://images.all-free-download.com/images/graphiclarge/small_house_329.jpg");
});
return false;
});
});​
the link to the example: http://jsfiddle.net/DWrC6/24/