0

この質問は、jsFiddleを提供することで最もよく説明できると思います。この例では、ユーザーがギャラリーアイテムをクリックすると、画像がdivに。で追加されid="showimage"ます。クリックした画像のパラメータを渡して、絶対画像ではなくその画像を表示する方法がわかりません。

次のように機能するはずです。

  • 画像1をクリックすると、画像1がに追加されshowimageます。親divの幅0pxから幅10％までアニメーション化する必要があります。
  • 画像1をもう一度クリックすると、折りたたまれます。幅100％から幅0pxまでアニメーション化されます。
  • すでに画像が入っているときに他の画像をクリックするとshowimage、すでに入っている画像が折りたたまれ、新しい画像がその場所で拡大します。

これは、次の3つの機能によって最もよく達成されると思います。

  1. showimage展開-0pxから100％に追加してアニメーション化します
  2. 折りたたみ-100％から0pxにアニメートし、から削除しますshowimage
  3. 置換-既にある画像で折りたたみをshowimage呼び出し、クリックした画像で展開を呼び出します

よろしくお願いします。

4

3 に答える 3

1

ここで私はあなたのフィドルをフォークし、あなたが望むようにそれを機能させました

http://jsfiddle.net/6vVUS/5/

于 2012-04-21T11:58:46.657 に答える
1

アニメーションが配置されていない。コードは次のようになります。

$(document).ready(function () {

    $('div.gallery').click(function (event) {

        var len = $('#showimage').find('img').length;
        var myimage = '<img src="http://s3images.coroflot.com/user_files/individual_files/302239_CauyLQoHZTkSJkkGnr3kVbFtw.jpg">';

        if (len === 0) {
            appendImage();

        }
       else {

            $('div#showimage').empty();
            appendImage();
      }

    });  

    function appendImage() {

       $('div#showimage').append(myimage);
       // your animation here 
    }  
});​
于 2012-04-21T12:08:35.170 に答える
0

私はなんとか問題を解決しました、そしてあなたはここでライブのjsFiddleの例を見ることができます。

私はこれのためにコードを本当にきれいに保ちました-3つの別々の関数とshowimagedivにコンテンツがあるかどうかをチェックするための1つのifステートメント。

私が使用したjQueryは次のとおりです。

var add_image = function(clicked) {
    var image_create = '<img src="' + clicked + '">';
    $('#showimage').hide().append(image_create).slideDown(400);
};

var change_image = function(clicked) {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
        add_image(clicked);
    });
};

var remove_image = function() {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
    });
};

$('.gallery').click(function() {
    var len = $('#showimage').children().length;
    var clicked = $("img", this).attr('src');
    if (len === 0) {
        add_image(clicked);
    } else if (len === 1) {
        change_image(clicked);
    }
});

$('#showimage').click(function() {
    remove_image();
});​
于 2012-04-27T20:24:58.770 に答える