image - switchClass() 第三次点击后交换类

Question

我得到以下信息：

http://jsfiddle.net/GsL8Z/

我想切换图像的大小。每次切换后，我想用正确大小的实例替换缩放的图像。

这实际上工作得很好，但只是第一次。第三次单击后，分配了错误的类。

任何帮助将不胜感激！

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

不知何故，switchClass 在替换 img 的整个 html 时遇到了问题。事实上，您只需更改 src.src 即可。

此外，您最好.toggle()在 jQuery 中使用来处理每次单击时前后变化的事情。

顺便说一句，setTimeout 也会出现问题。.switchClass()有一个在动画完成后运行的完整处理程序，您应该使用它。

因此，解决方案可能是：

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

小提琴：http: //jsfiddle.net/GsL8Z/2/

Answer 2

我用 jquery-ui 中的示例测试了一些东西，它的工作原理比你的代码短一点：

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

});​</p>

示例链接：http: //jsfiddle.net/DWrC6/24/