1

私は次のものを手に入れました：

http://jsfiddle.net/GsL8Z/

画像のサイズを切り替えたい。切り替えるたびに、拡大縮小された画像を適切なサイズのインスタンスに置き換えたいと思います。

これは実際にはかなりうまく機能しますが、初めてです。3回目のクリックの後、間違ったクラスが割り当てられます。

どんな助けでも大歓迎です！

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

2 に答える 2

0

どういうわけか、switchClass で HTML 全体を img に置き換える際に問題が発生しています。実際のところ、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/

于 2012-10-25T09:30:35.493 に答える
0

私は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/

于 2012-10-25T09:41:43.193 に答える