Question

我得到了以下内容：

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

这实际上效果很好，但只是第一次。第三次单击后，错误的类被分配。

非常感谢任何帮助！

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。

此外，最好在jQuery中使用.toggle()来处理每次点击后退和前进的事情。

顺便说一下，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;
});

}）;

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

switchClass（）在第三次点击后交换类

2 个答案: