使用jQuery的.hide()方法与淡出效果

Question

我有一个基于复选框进行div隐藏的.hide()函数。

在此处查看其运行的JS Fiddle 在这里查看真实网站示例

我试图为它添加动画效果，使.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);
        }

我哪里做错了？

- Francesca

---

这里需要注意的重要事项是，hide()方法根本不需要传入效果参数。请阅读该方法的文档以查看不同的参数。在这种方法中，第一个参数或参数属性通常是duration参数。 - Boaz

Answer 1

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

还有 fadeIn 和 fadeToggle。

- Arnelle Balane

---

这个赞是给jQuery的。 - tObi

这个技术上并没有回答这个问题，因为show和hide方法作用于display属性，而fade方法作用于opacity属性。 - neil1967

Answer 2

你可以使用@Arnelle的解决方案，如果你想要淡出或替换$(this).hide("fade", {}, 1000);。

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

通过传递 "slow" 参数，您的 div 在隐藏前将展示出一段漂亮的动画效果。

已对您的代码进行修改：http://jsfiddle.net/Z9ZVk/8/

- codefreak

---

Arnelle的答案逐渐消失了。使用隐藏和显示的动画与淡出不同... 它比淡出和淡入更酷。 - codefreak

这真的很棒，但是当快速连续点击筛选器时，它就不能正常工作，这在电子商务中非常典型。考虑使用简单的淡入淡出效果可能更好。尽管如此，这还是很棒的！ - Francesca

真是个宝石！难以置信我以前从未知道过这个！ - Henry Howeson

Answer 3

尝试使用具有持续时间的 fadeout 而不是使用 hide。

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

演示代码

这是一个演示代码链接。

- Milind Anantwar

Answer 4

我已经尝试了下面链接中的代码，它运行良好。

使用jQuery .hide()和.show()实现渐变效果 - 演示

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

你可以从下面的链接中找到使用jQuery的fadeIn、fadeOut、slideUp和slideDown效果。

链接：使用jQuery实现fadeIn、fadeOut和slideUp、slideDown效果。

- Barath Kumar

Answer 5

实现淡入淡出效果以平滑过渡的最佳方法是通过CSS、jQuery的组合来添加和删除类。

$("#div1").addClass('fade in show').removeClass('in hidden');
$("#div2").removeClass('fade in show').addClass('in hidden');

.hidden {
    display: none;
}

.show {
    display: block;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

    .fade.in {
        opacity: 1;
    }

- Kailash Mali