[stackoverflow] show larger image

3949292/jquery-append-html-show-hide-in-ie

by danmana

HTML

<div id="img">
    <img src="http://stevenjsteele.com/websitedesign/database/php/image/Actionscript3cookbook.jpg" width="90">
    <div span="getLargeImage">
        <a href="http://stevenjsteele.com/websitedesign/database/php/image/Actionscript3cookbook.jpg" class="popup">Larger view</a>
    </div>
</div>

JavaScript

$('.popup').hover(function(e) {
    var getId = $(this).attr("id");
    var getAttr = $(this).attr("href");
    var html = '<div id="full_img">';
    html += '<img src="' + getAttr + '" />';
    html += '</div>';
    //console.log(getId);
    //console.log(getAttr); 
    $('body').append(html).children('#full_img').hide().fadeIn(100);
    $('#full_img').animate({
        "width": "0px",
        "width": "250px"
    }, 100);
    $('#full_img').css('top', e.pageY + -330).css('left', e.pageX - 350);

}, function() {
    $('#full_img').animate({
        "width": "250px",
        "width": "0px"
    }, 100);
    $('#full_img').fadeOut(10);
    $('#full_img').remove();

});