31

我有一个.hide()基于复选框隐藏 div 的功能。

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

我哪里错了？

4

5 回答 5

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

还有fadeIn和fadeToggle。

于 2013-04-23T08:54:37.593 回答
22

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

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

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

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

通过更改修改了您的小提琴：http: //jsfiddle.net/Z9ZVk/8/

于 2013-04-23T08:57:38.877 回答
2

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

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

工作小提琴

于 2013-04-23T08:59:12.210 回答
1

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

使用带有淡入淡出的 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找到淡入、淡出、上滑和下滑。

使用 Jquery 的 fadeIn fadeOut 和 slideUp slideDown 效果

于 2015-04-28T13:59:07.953 回答
0

隐藏/显示具有渐变效果的 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;
    }

于 2020-08-19T11:30:02.080 回答