0

私はほとんどのコードを調べましたが、何か(私が知っている小さなもの)が私を逃しています:

大きな画像を div に読み込み、その div のサイズを変更して、新しい大きな画像のサイズに合わせます。div はサムネイルをクリックするとフェードインし、クリックするとフェードアウトし、新しいサムネイルをクリックするとサイズ変更された新しいコンテンツに変更されます (後で進むボタンと戻るボタンを追加します)。

div のサイズが変更されたときのアニメーションを除いて、すべて正常に動作します。コードにエラーが表示されません。何か助けはありますか？

HTML コード:

<div id="wrapper">
<div id="small"><img src="images/small/001.jpg" width="100" height="125"><img     src="images/small/002.jpg" width="100" height="125"></div>
<div id="large"><img src="" /></div>

JQuery:

$(document).ready(function(){
    $('#small img').click(function() {
        var image = $(this);
        var src = image.attr('src');
        src = src.split('/');
        var filename = src[src.length-1];
        var image_folder = 'images/large/';
        var large_image = $('#large img');
        large_image.attr('src', image_folder + filename);
        new_height = $('#large img').height+"px";
        new_width = $('#large img').width+"px";
        $('#large').html('');
        $('#large').append(large_image);
        if( $('#large').is(":visible") ) {
            $('#large').animate({
                "height":new_height,
                "width":new_width
            }, {duration: 1000})
        } else {
            $('#large').css('visibility','visible').hide();
            $('#large').fadeIn(1000);
        }   
    });
    $('#large').click(function(){
        $('#large').fadeOut(1000);
        //$('#large').hide();
    });
});
4

2 に答える 2

1

width() と height() の代わりに width と height を使用していることに気付いたので、試してみてください。これを使用してください。

new_height = $('#large img').height()+"px";
new_width = $('#large img').width()+"px";

編集： - - - - - - - -

どのような効果を適用しようとしているのかはわかりませんが、jQuery UI を使用して、このhttp://jsfiddle.net/v3YkY/を思いつきました。これを使用する場合は、jQuery UI CSS をページに追加することを忘れないでください。

于 2012-04-27T19:59:56.417 に答える
0

これがあなたの問題かどうかはわかりません...しかし、このコード行は矛盾しています-

$('#large').css('visibility','visible').hide();

visibilitycss パラメータを に設定しvisible、すぐに要素を非表示にしています。

.show()との.hide()機能を使用するだけで、を処理する必要はありません.css('visibility','visible')。この:visible属性は、jQuery に知られている他の属性によってほのめかされていますdisplay。たとえば。

また、関数を呼び出した後にセミコロンがありません.animate()。今は問題にならないかもしれませんが、さまざまなブラウザーでテストを開始すると、問題が発生することは間違いありません。 名前は言わずもがな…

于 2012-04-27T19:54:26.447 に答える