Utilizzo di jQuery .hide() con dissolvenza

Ho una funzione .hide() che nasconde i div in base alle caselle di controllo.Utilizzo di jQuery .hide() con dissolvenza

JS Fiddle of it working here Real site example here

che sto cercando di dargli l'animazione in modo che il .hide() sarà fade in/out, piuttosto che semplicemente sparire.

provato utilizzando la funzione di jQuery Fade ma come parametro per .hide(), ma non sembra funzionare

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

Ho provato ad utilizzare questo nel mio codice (vedi JS Fiddle) come segue:

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

Dove sto andando male?

fonte

2013-04-23 Francesca

La cosa importante da notare qui è che il 'hide()' metodo non prende un argomento effetto a tutti. Leggi [la documentazione del metodo] (http://api.jquery.com/hide/) per vedere i diversi argomenti. In tali metodi la prima proprietà argomento o argomento è solitamente l'argomento 'duration'. – Boaz

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

ci sono anche fadeIn e fadeToggle.

fonte

2013-04-23 08:54:37

questo pollice su era per jquery – tObi

questo tecnicamente non risponde alla domanda, poiché mostra e nasconde il lavoro sul display ei metodi di dissolvenza funzionano su opacità. – neil1967

Si potrebbe usare @ la soluzione di Arnelle se si vuole dissolvenza o

sostituire $(this).hide("fade", {}, 1000); con

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

passando "lento" darà una bella animazione prima di nascondere il tuo div.

modificato il violino con i cambiamenti: http://jsfiddle.net/Z9ZVk/8/

fonte

2013-04-23 08:57:38 codefreak

La risposta di Arnelle svanisce. L'animazione con hide e show è diversa dalla dissolvenza ... È più bello che svanire e sbiadirsi in – codefreak

Questo è davvero ottimo, tuttavia non funziona quando i clic sui filtri vengono fatti in rapida successione, in modo abbastanza tipico con l'e-commerce. Pensa che una semplice dissolvenza potrebbe funzionare meglio. Questo è fantastico però! – Francesca

Prova utilizzando fadeout con la durata invece di usare nascondere.

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

Working Fiddle

fonte

2013-04-23 08:59:12

Ho provato il codice nel link qui sotto, relativo funzionamento benissimo.

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

È inoltre possibile trovare fadeIn, fadeOut, slideUp e slideDown utilizzando jQuery da thebelow collegamento.

fadeIn fadeOut and slideUp slideDown Effects Using Jquery

fonte

2015-04-28 13:59:07

Utilizzo di jQuery .hide() con dissolvenza

risposta

Problemi correlati