Jquery UI: Combiner des effets aveugles et fades

Question

Je ne suis même pas sûr si c'est possible, mais je veux combiner aveugle et fondu.

Fondu fonctionne en changeant l'opacité d'un élément, et aveugle je pense, en changeant la largeur/hauteur.

Mon but est de créer une animation où le bord de l'élément disparaîtrait à travers l'écran, alias une combinaison d'aveugle et de fondu. Je ne sais pas s'il y a un terme pour ça.

Mais de toute façon, est-ce possible et si oui, comment?

Answer 1

La solution à laquelle je pense en ce moment est de casser l'élément de fondu en éléments 1px, puis de fondre chaque pixel individuellement en même temps que l'aveuglement se produit. Je ne peux pas imaginer que ce soit lisse avec les navigateurs actuels.

Je vais simplement appeler cela «pas possible».

Answer 2

Jouez avec la fonction jQuery animate(). Cela vous permet essentiellement d'interpoler linéairement entre les valeurs CSS (de n'importe quel objet à partir des valeurs que vous définissez) sur une période donnée. Vous pouvez donc l'utiliser pour modifier l'opacité et la largeur pour obtenir l'effet souhaité. Faites attention cependant, car vous devrez prendre en compte toutes les variantes d'opacité, car IE ne supporte pas encore le standard "opacity: value;" un.

Answer 3

La manière la plus simple d'y parvenir est d'utiliser l'interface utilisateur jQuery et les fonctions toggleClass ou addClass. Ce que ces fonctions font est d'animer d'une classe à l'autre donc essentiellement vous définissez simplement un état de départ et un état final et les fonctions s'occupent du reste.

Espérons que ça aide!

cliquez here pour le violon

CSS

---

.divHidden{ 
    height: 150px; 
    opacity: 0.0; 
    width: 0px; /*Set to 0 so div is not visible */ 
    overflow: hidden; 
    background: yellow; 
} 

.divShown{ 
    opacity: 1.0; 
    width: 100px; 
} 

HTML

---

<button>Click me</button> 
<div id="test" class="divHidden">Testing</div> 

Javascript

---

$('button').click(function(){ 
    $('#test').addClass('divShown', 2000); 
}); 

Answer 4

$("#box").animate({height:'0',opacity:'0'}, { complete: function() {this.remove()} }); 

juste utiliser l'animation?

Answer 5

Je sais que cela a été demandé il y a quelque temps, mais ces jours-ci cela peut être fait avec jquery/jQueryUI comme ceci:

$('#test').hide("blind", { direction: "horizontal" }, 1500) 
    .fadeOut(1500) 
    .dequeue(); 

Vous pouvez utiliser plusieurs fonctions en même temps en appelant .dequeue() à plusieurs reprises ainsi:

$('#test').hide("blind", { direction: "horizontal" }, 1500) 
    .hide("slide", { direction: "left" }, 1500) 
    .fadeOut(1500) 
    .dequeue() 
    .dequeue(); 

ci-dessus utilisera la diapositive et l'effet aveugle cacher « test » pendant la décoloration en même temps. Voici une démo jsFiddle:

http://jsfiddle.net/DirectCtrl/rVp35/1/