Скрипт для анимации высоты DIV внезапно меняет высоту DIV - PullRequest
Новая
       14

Скрипт для анимации высоты DIV внезапно меняет высоту DIV

1 голос
/ 11 декабря 2011

У меня есть следующий скрипт, который работал с использованием эффектов slideUp и slideDown, но не работает должным образом при анимации высоты DIV: 

$(function () {
    var myTimer,
        myDelay = 500;

    $('.slide, .the_menu').hover(function () { 

        //when either a `img.menu_class` or a `.the_menu` element is hovered over, clear the timeout to hide the menu and slide the menu into view if it already isn't
        clearTimeout(myTimer);

            $('.the_menu').animate({height:'37px'},'fast', function () { $('.the_menu').stop(true, true).fadeIn('slow'); });


    },
    function () {

        //when either a `img.menu_class` or a `.the_menu` element is hovered out, set a timeout to hide the menu
        myTimer = setTimeout(function () {
        $('.the_menu').stop(true, true).fadeOut('slow', function () { $('.the_menu').animate({height:'0px'},'fast');                });}, myDelay);
    });
});

Вы можете увидеть его в действии на эта страница .Наведите указатель мыши на второе «домашнее» изображение в навигационной панели.

Проблема в том, что анимация на высоте DIV не работает должным образом, то есть не плавный переход, а скореевнезапное изменение высоты.

Может ли кто-нибудь дать мне знать, почему?

Спасибо,

Ник

Ответы [ 2 ]

0 голосов
/ 11 декабря 2011

Проблема в том, что вы делаете fadeOut до анимации уменьшения высоты и fadeIn после увеличения высоты. Итак:

  1. до того, как анимационная высота, уменьшающаяся в вашем div, не имеет содержимого, поэтому его высота уже изменилась на cero.
  2. после того, как анимированное увеличение высоты имеет содержимое div, его высота уже составляет 37px.
0 голосов
/ 11 декабря 2011

Если вы измените анимацию, когда вы хотите открыть меню, чтобы использовать slideDown («медленно») - вы увидите постепенное изменение высоты.Как в: 

    $('.the_menu').slideDown({height:'37px'},'slow', function () {   
  $('.the_menu').stop(true, true).fadeIn('slow'); });

для слайда, вам лучше будет сделать слайд, а затем скрыть меню - вместо того, чтобы исчезать из меню перед его удалением.

http://jsfiddle.net/amelvin/cfFTU/

...