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

[verfaa]

Задача в том, чтобы плавно отобразить-скрыть сообщение "Товар добавлен в корзину" в интернет-магазине

Есть 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 не срабатывает?

 

[Vishez]

Задача в том, чтобы плавно отобразить-скрыть сообщение "Товар добавлен в корзину" в интернет-магазине

Есть 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 не срабатывает?

Пользуйся jquery функциями show() и hide(). Для просмотра ссылки Войди или Зарегистрируйся

 

[alffcpu]

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

$("#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() вместо установления стиля (что по сути почти тоже самое).

 

[MadChild]

По мне лучше так:

$("#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 то он не ждет пока строка закончит выполняться, он просто запускает следующую