jquery - フェードインの方法.html()

Question

$('.overview li a').click(function(){
        $('#large-img').html("<img src=" + $(this)
                           .attr('href') + "/>" + "<br /><div>" + $(">.desc",this)
                           .html()); //HOW TO FADEIN this
        return false;
        });

Answer 1

.fadeIn()jQuery コレクションでのみ呼び出すことができます。html()文字列を返すため、それには使用できません。考えられる 1 つの方法は、(挿入したい) HTML から jQuery コレクションを作成し、それを非表示にしてから、その場所に追加してフェードインすることです。

このコードはこれを行います:

$('.overview li a').click(function(){
    var $newstuff=
        $("<img src=" 
        + $(this).attr('href') 
        + ">"
        + "<br><div>" 
        + $(">.desc", this).html()
        + '</div>').hide();

    $('#large-img').append($newstuff.fadeIn('slow'));
    return false;
});

jsFiddle デモ

そして、同じコードをもう少し jQuery っぽい方法で:

$('.overview li a').click(function(){  
    $('<img>').attr('src', $(this).attr('href'))
        .add('<br>')
        .add($('<div>').html($(">.desc", this).html()))
        .hide()
        .appendTo($('#large-img'))
        .fadeIn('slow'); 
    return false;
});

jsFiddle デモ 2

Answer 2

これを試してください：

$('.overview li a').click(function(){
    var a = this;
    var img = $("<img src='" + $(this).attr('href') + "'/>" +  "<br /><div>");
    $('#large-img').hide('fast', function(){ 
        $(this).html(img + $(">.desc", a)).show('fast'); 
    });
    return false;
});