web-dev-qa-db-ja.com

jQuery .hide（）をフェードとともに使用する

チェックボックスに基づいて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);
        }

どこがおかしいの？

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

fadeInとfadeToggleもあります。

50
Arnelle Balane

フェードアウトしたい場合は、@ Arnelleのソリューションを使用するか、

$(this).hide("fade", {}, 1000);を置き換えます

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

「遅い」を渡すと、divを非表示にする前に素敵なアニメーションが表示されます。

変更でフィドルを変更しました： http://jsfiddle.net/Z9ZVk/8/

15
codefreak

Hideを使用する代わりに、fadeoutをdurationとともに使用してみてください。

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

作業フィドル

2
Milind Anantwar

私は以下のリンクのコードを試しましたが、うまく機能しています。

jQuery .hide（）および.show（）をフェーディングで使用-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を見つけることもできます。

Jqueryを使用したfadeIn fadeOutおよびslideUp slideDownエフェクト

1
Bharath Kumaar