使用jQuery.hide（）进行淡入淡出

我有一个

.hide（）

函数，它根据复选框隐藏div

我正在尝试为它设置动画，以便

.hide（）

将淡入/淡出，而不是消失

尝试使用jQuery淡入淡出功能，但作为

.hide（）

的参数，但似乎不起作用

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

我试着在我的代码中使用它（参见JS Fiddle），如下所示：

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

我哪里做错了

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

---

还有

fadeIn

和

fadeToggle

如果您想淡出或退出，您可以使用@Arnelle的解决方案

替换

$（this）.hide（“淡入淡出”{}，1000）
与

在隐藏div之前，传递“slow”将提供一个很好的动画

修改您的更改：尝试使用持续时间
fadeout
而不是使用hide

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

我在下面的链接中尝试了该代码，它工作正常


您还可以使用Jquery从下面的链接中查找fadeIn、fadeOut、slideUp和slideDown

隐藏/显示具有淡入效果的div以实现平滑过渡的最佳方法是将CSS、jQuery与添加和删除类相结合


$（“#div1”）.addClass（'fade-in-show'）.removeClass（'in-hidden'）；
$（“#div2”）.removeClass（'fade-in-show'）.addClass（'in-hidden'）
。隐藏{
显示：无；
}
.表演{
显示：块；
}
.褪色{
不透明度：0；
-webkit过渡：不透明度0.15s线性；
-o型过渡：不透明度0.15s线性；
过渡：不透明度0.15s线性；
}
.淡入{
不透明度：1；
}
Arnelle的答案逐渐消失。带隐藏和显示的动画与淡出不同。。。它比淡出淡入更酷这真的很棒，但是当快速连续点击过滤器时，它不起作用，这在电子商务中非常典型。我想简单的淡入淡出效果会更好。这太棒了！多好的宝石啊！真不敢相信我从来没有见过这个！这里需要注意的重要一点是，
hide（）
方法根本不接受有效参数。阅读以查看不同的参数。在这种方法中，第一个参数或参数属性通常是
duration
参数。这个竖起的拇指是用于jquery的。从技术上讲，这并不能回答问题，因为显示和隐藏在显示上起作用，而淡入淡出方法在不透明度上起作用。
   if(allSelected.length > 0){
        $("div.prodGrid > div:not(" + allSelected + ")").fadeOut(1000);
    }

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