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()返回一个字符串，所以它不能用于那个。一种可能的方法是从您的 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;
});