Question

cant make this animation to work

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .animate({
            opacity : 0.1
        },
        400);

div.insert_highlight {
    position:absolute;
    background:#00ff00;
    z-index:-1;
    /*display:none;*/
}

as it is now the opacity fades down from 1 to 0.1, but if I unescape the display:none; in the style nothing happens and the element stays at opacity 0 or display:none

Answer 1

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .css({display: 'block', opacity:0})
    .animate({
            opacity : 0.1
        },
        400);