Использование jQuery.hide() с замиранием

У меня есть функция .hide(), которая скрывает divs на основе флажков.

JS Сценарий работы здесь Настоящий пример сайта

Я пытаюсь дать ему анимацию, чтобы .hide() затухал в/из, а не просто исчезал.

Пробовал использовать функцию jQuery Fade, но как параметр для .hide(), но, похоже, не работает

$("div").click(function () {
      $(this).hide("fade", {}, 1000);
});

Я попытался использовать это в своем коде (см. JS Fiddle) следующим образом:

if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").hide("fade", {}, 1000);
        }

Где я иду не так?

Ответ 1

$("div").click(function () {
  $(this).fadeOut(1000);
})

Есть также fadeIn и fadeToggle.

Ответ 2

Вы можете использовать решение @Arnelle, если хотите fadeOut или

заменить $(this).hide("fade", {}, 1000); с

     $(this).hide("slow");//or $(this).hide(1000);

передача "slow" даст приятную анимацию, прежде чем скрыть ваш div.

Изменена ваша скрипка с изменениями: http://jsfiddle.net/Z9ZVk/8/

Ответ 3

Попробуйте использовать fadeout с длительностью, а не с помощью hide.

   if(allSelected.length > 0){
        $("div.prodGrid > div:not(" + allSelected + ")").fadeOut(1000);
    }

Рабочая скрипта

Ответ 4

Я пробовал код в приведенной ниже ссылке, его работоспособность.

Использование jQuery.hide() и .show() с затуханием - Live Demo

 $("#btnHideShow").click(function () {
            if ($("#btnHideShow").val() == "Hide") {
                $("#imgHideShow").hide(1000);
                $("#btnHideShow").attr("value", "Show");
            }
            else {
                $("#imgHideShow").show(1000);
                $("#btnHideShow").attr("value", "Hide");
            }
        });

Вы также можете найти fadeIn, fadeOut, slideUp и slideDown Использование JQuery из следующей ссылки.

fadeIn fadeOut и слайд-эффект слайд-шоу с использованием JQuery