Анимация непрозрачности скрыть / показать - PullRequest
Новая
       23

Анимация непрозрачности скрыть / показать

2 голосов
/ 06 февраля 2012

Итак, чем отличается:

A) (работа для меня) 

... .animate({opacity: "show", marginTop: "25"}); ...

...

B (у меня не работает) 

... .animate({opacity: "1", marginTop: "25"}); ...

например, http://jsbin.com/iquwuc/6/edit#preview

Ответы [ 4 ]

2 голосов
/ 06 февраля 2012

Это потому, что вас показывают и прячут, а не анимируют непрозрачность.(Видимо: P).

Отредактированный код: http://jsbin.com/iquwuc/11/edit#preview

Вы можете внести следующие изменения, чтобы использовать настройку непрозрачности:

Добавьте следующий код: 

.sub-menu li#access ul {opacity:0; display:none;}

И измените свой сценарий следующим образом: 

$(document).ready(function(){

    $('.sub-menu').hover(function(){ 
          $('.sub-menu li#access ul').show();
        $('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500);
        },
        function() {
                  $('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){
                  $('.sub-menu li#access ul').hide();
                  });   
        });
});

В основном происходит следующее:

При наведении курсора вы показываете раскрывающийся список с непрозрачностью 0, затем анимация устанавливает маржу и непрозрачность.и при наведении мыши увеличиваем непрозрачность до 0 и снова скрываем.

2 голосов
/ 06 февраля 2012

Когда вы вызываете hide(), это примерно эквивалентно .css('display', 'none'), поэтому позднее изменение непрозрачности обратно на 1 изменяет непрозрачность скрытого элемента.И именно поэтому show() работает - потому что он снова делает блок элементов.

1 голос
/ 06 февраля 2012

в файле CSS или в строке. Установите идентификатор или класс на

встроенный - <div id="myid" style="opacity:0;"></div>

в CSS 

        #myid { opacity: 0; }
        .myclass {opacity: 0; }

таким образом, при вызове анимации непрозрачности из jQuery он будет функционировать иначе, чем просто вызов анимации, которая уже имеет 1 непрозрачность

0 голосов
/ 06 февраля 2012

Я бы использовал для этого dojo bibliothek (http://dojotoolkit.org/reference-guide/dojo/animateProperty.html).. В DOJO вы найдете не только функции анимации, этот фреймворк предлагает множество компонентов для решения большой области различных проблем.

...