CODEWITHSUNDEEP
javascriptjquerycssopacityjquery-animate
clarkk
clarkk

Reputation: 1

animation() and opacity

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

Upvotes: 0

Views: 2626

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

Take a look at this JSFiddle DEMO

I used:

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .css('display','none') // set css to hide element
    .fadeTo(400 , 0.1);   // and finally go to desired opacity

Upvotes: 1

daryl
daryl

Reputation: 15237

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);

Upvotes: 2

beerwin
beerwin

Reputation: 10337

that's the problem itself.

display:none is not equal to opacity:0;

if an element is 100% transparent, it's still "visible" in the means of CSS.

give it 

opacity:0; /*(for css3 supporting browsers) and*/ 
filter:alpha(opacity=0); /*for IE 6-8 and */
-ms-filter:alpha(opacity=0); /*for ie9*/

that should do the trick

Upvotes: 0

stecb
stecb

Reputation: 14766

display:none means that the element won't be rendered by the browser...what do you want to achieve? You'll have to set display:block to see it

Upvotes: 0

Related Questions