Проблема со скрытием-отображением блока в jQuery

Тема в разделе "JavaScript", создана пользователем verfaa, 4 апр 2014.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Задача в том, чтобы плавно отобразить-скрыть сообщение "Товар добавлен в корзину" в интернет-магазине

    Есть div
    Код:
    <div id="div_buy_tovar_message" style="border: 1px solid red; width: 400px; height: 230px; position: fixed; top: 160px; left: 736px; background: white; z-index: 5; display: none;" >
            Товар добавлен в корзину!
        </div>
    и скрипт

    Код:
    $("#div_buy_tovar_message").css("display", "block");
    $("#div_buy_tovar_message").css("opacity", "0.1");
                   
    $("#div_buy_tovar_message").animate({opacity: 1}, 200);
                   
    $("#div_buy_tovar_message").delay(1500).animate({opacity: 0.5}, 700);
    $("#div_buy_tovar_message").css("display", "none");
    Так блок вообще не появляется. Но стоит убрать строку
    Код:
    $("#div_buy_tovar_message").css("display", "none");
    
    и все работает. Но без display:none прозрачный блок висит на странице и мешает нажимать на ней что либо. Ф-ция hide() тоже не прокатывает. Вопрос - почему display: none не срабатывает?
     
  2. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Пользуйся jquery функциями show() и hide(). http://jsfiddle.net/Q8jyX/
     
  3. alffcpu

    alffcpu Создатель

    Регистр.:
    23 окт 2013
    Сообщения:
    22
    Симпатии:
    56
    Здравствуйте,
    мальца переписал то что у вас. У меня вроде работает, (как мне кажется) то что вы задумали. Не претендую на то что это идеально верный вариант (это сразу пишу для САМЫХ умных).

    Код:
    $("#div_buy_tovar_message").show().css("opacity", "0.1").animate({opacity: 1}, 200, function() {
         $(this).delay(1500).animate({opacity: 0.5}, 700, function() {
           $(this).hide();
         });
    });
    
    Если все разложить по шагам. И ответить на ваш вопрос, то проблема в том что у вас все действия выполняются сразу, а надо дождаться окончания выполнения анимации в каждом шаге. Что собственно и сделано у меня. И еще как указанно в посте выше я использовал show() и hide() вместо установления стиля (что по сути почти тоже самое).
     
    verfaa нравится это.
  4. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    По мне лучше так:
    Код:
    $("#div_buy_tovar_message").css("opacity", "0");
    $("#div_buy_tovar_message").show();
    $("#div_buy_tovar_message").animate({opacity: 1}, 200);
    $("#div_buy_tovar_message").delay(1500).animate({opacity: 0}, 500);
    setTimeout(function() {
    $("#div_buy_tovar_message").hide();
    }, 500);
    а почему исчезало у вас, потому что Вы говорит: уменьшить прозрачность блока до 50% за 700 милисекунд и сразу же говорите: скрыть блок
    JS такой язык, который выполняет все последовательно, но параллельно, т.е. запускает все строки по порядку, но если стоит animate то он не ждет пока строка закончит выполняться, он просто запускает следующую
     
    Последнее редактирование: 5 апр 2014