JQuery Animate не работает - PullRequest
Новая
       30

JQuery Animate не работает

0 голосов
/ 15 апреля 2011

По какой-то причине мне кажется, что .animate не работает должным образом.Кто-нибудь может понять почему?

Я использую этот контейнер div ... 

#valve-menu {
    position: absolute;
    width: 780px;
    top: 200px;
    background-color: #9C3;
    margin-right: 9px;
    margin-left: 10px;
}

затем .. 

#control-cover{
    height: 50px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    }
#control{
    background-color: #0C9;
    height: 200px;
    width: 180px;
    margin-right: 10px;
    position: absolute;
    }

Мой Jquery это 

$(document).ready(function(){

    //When mouse rolls over
    $("#control-cover").mouseover(function(){
        $(this).stop()
               .animate({height:'150px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#control-cover").mouseout(function(){
        $(this).stop()
               .animate({height:'50px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

Я хочу частично скрыть элемент управления, а затем развернуть его.

Ответы [ 2 ]

3 голосов
/ 16 апреля 2011

Это работает. Если вы не используете плагин Easing, в jQuery Swing и Linear по умолчанию доступно только два: С сайта JQuery http://api.jquery.com/animate/

Облегчение

Оставшийся параметр .animate () строка, называющая функцию замедления использовать. Функция замедления определяет скорость, с которой анимация прогрессирует в разных точках в анимация. Единственное смягчение реализации в библиотеке jQuery по умолчанию, называется качели, и один что прогрессирует в постоянном темпе, называется линейным. Больше функций ослабления доступны с использованием плагины, в первую очередь пользовательский интерфейс jQuery люкс. 

    $(document).ready(function(){

        //When mouse rolls over
        $("#control-cover").bind('mouseover mouseenter',function(){
            $(this).stop()
            .animate({height:'150px'},
            {queue:false, duration:600, easing: 'swing'})
        });

        //When mouse is removed
        $("#control-cover").bind('mouseout mouseleave',function(){
            $(this).stop().animate({height:'50px'},
            {queue:false, duration:600, easing: 'swing'})
        });

    });
0 голосов
/ 15 апреля 2011

Селектор $('#control-over') в jQuery будет искать в вашем html элемент с id , равным control-over, например. <div id="control-over">. Из вашего примера кода, похоже, у вас есть CSS класс с именем control-over. Два не одинаковы.

Вам необходимо либо добавить атрибут id= в свой элемент html, либо выполнить поиск элемента по имени класса, например $('.control-over').

...