使用带有淡入淡出的 jQuery .hide()答案

【问题标题】：Using jQuery .hide() with fading使用带有淡入淡出的 jQuery .hide()
【发布时间】：2013-04-16 09:52:29
【问题描述】：

我有一个 .hide() 函数，它根据复选框隐藏 div。

JS Fiddle of it working here Real site example here

我正在尝试给它动画，以便.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);
        }

我哪里错了？

【问题讨论】：

这里要注意的重要一点是hide() 方法根本不带效果参数。阅读the method's documentation 以查看不同的论点。在此类方法中，第一个参数或参数属性通常是 duration 参数。

标签： jquery hide fade

【解决方案1】：

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

还有fadeIn和fadeToggle。

【讨论】：

这个赞是给 jquery 的
这在技术上并不能回答这个问题，因为显示和隐藏工作在显示上，而淡入淡出方法在不透明度上工作。

【解决方案2】：

如果你想淡出或使用@Arnelle 的解决方案

替换$(this).hide("fade", {}, 1000); 与

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

在隐藏你的 div 之前传递“slow”会给出一个很好的动画。

修改了你的小提琴：http://jsfiddle.net/Z9ZVk/8/

【讨论】：

Arnelle 的回答逐渐淡出。隐藏和显示的动画与淡出不同......它比淡出和淡入更酷
这确实很棒，但是当快速连续单击过滤器时它不起作用，这在电子商务中很典型。认为简单的淡入淡出可能会更好。不过这很棒！
多么棒的宝石！不敢相信我从来没有新过这个！

【解决方案3】：

尝试将fadeout 与持续时间一起使用，而不是使用隐藏。

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

Working Fiddle

【讨论】：

【解决方案4】：

我已经尝试了下面链接中的代码，它工作正常。

Using jQuery .hide() and .show() with fading - Live Demo

 $("#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。

fadeIn fadeOut and slideUp slideDown Effects Using Jquery

【讨论】：

【解决方案5】：

隐藏/显示带有渐变效果的 div 以实现平滑过渡的最佳方法可以通过 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;
    }

【讨论】：