анимация () и непрозрачность - PullRequest
Новая
       43

анимация () и непрозрачность

0 голосов
/ 18 мая 2011

не могу заставить эту анимацию работать 

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;*/
}

, как сейчас, непрозрачность уменьшается с 1 до 0.1, но если я уберу display:none; в стиле, то ничего не произойдет, и элемент останется с непрозрачностью 0 или покажет: нет

Ответы [ 4 ]

2 голосов
/ 18 мая 2011 
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);
1 голос
/ 18 мая 2011

Взгляните на это JSFiddle DEMO

Я использовал: 

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
0 голосов
/ 18 мая 2011

это сама проблема.

display: none не равно непрозрачности: 0;

, если элемент прозрачен на 100%, он все еще «виден» в CSS.

дайте ему 

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

, что должно сработать

0 голосов
/ 18 мая 2011

display:none означает, что элемент не будет отображаться браузером ... чего вы хотите достичь? Вам нужно установить display:block, чтобы увидеть

...