how to fadeIn .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() can only be called on jQuery collections. html() returns a string, so it cannot be used on that. One possible route is to create a jQuery collection out of your HTML (that you want to insert), hide it, then append it to its place and fade it in.

This code does this:

$('.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 Demo

And the same code in a bit more jQuery-ish way:

$('.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 Demo 2

Answer 2

Give this a try:

$('.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;
});