Question

我有一个.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);
        }

我哪里错了？

Answer 1

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

还有fadeIn和fadeToggle。

Answer 2

如果你想要fadeOut或

，你可以使用@Arnelle的解决方案

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

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

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

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

Answer 3

尝试使用fadeout持续时间而不是使用隐藏。

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

<强> Working Fiddle

Answer 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");
            }
        });

你也可以从下面的链接中找到 fadeIn，fadeOut，slideUp和slideDown 使用Jquery。

fadeIn fadeOut and slideUp slideDown Effects Using Jquery

Answer 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;
    }

使用带有淡入淡出的jQuery .hide（）

5 个答案: