web-dev-qa-db-fra.com

Utilisation de jQuery .hide () avec décoloration

J'ai une fonction .hide() qui masque les divs en fonction des cases à cocher.

JS Fiddle de ça fonctionne iciExemple de site réel ici

J'essaie de lui donner une animation afin que la .hide() se fane in/out au lieu de simplement disparaître.

Essayé en utilisant la fonction jQuery Fade mais comme paramètre pour .hide() mais ne semble pas fonctionner

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

J'ai essayé d'utiliser ceci dans mon code (voir JS Fiddle) comme suit:

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

Où vais-je mal?

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

Il existe également fadeIn et fadeToggle.

50
Arnelle Balane

Vous pouvez utiliser la solution de @ Arnelle si vous voulez fadeOut ou

remplacer $(this).hide("fade", {}, 1000); par

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

passer "lentement" donnera une belle animation avant de cacher votre div.

Modifié votre violon avec des changements: http://jsfiddle.net/Z9ZVk/8/

15
codefreak

Essayez d'utiliser fadeout avec duration au lieu d'utiliser hide.

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

Violon de travail

2
Milind Anantwar

J'ai essayé le code dans le lien ci-dessous, cela fonctionne bien.

tilisation de jQuery .hide () et .show () avec décoloration - Démo en direct 

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

Vous pouvez également trouver fadeIn, fadeOut, slideUp et slideDown en utilisant Jquery à partir du lien ci-dessous.

fadeIn fadeOut et slideUp slideDown Effects Using Jquery

1
Bharath Kumaar