script.aculo.us - Efeitos Visuais

Os efeitos script.aculo.us são divididos em dois grupos -

Efeitos Principais

Os seis efeitos principais a seguir são a base da biblioteca JavaScript de efeitos visuais script.aculo.us.

Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel

Todos os efeitos principais suportam vários parâmetros comuns, bem como parâmetros específicos de efeitos e esses nomes de efeito diferenciam maiúsculas de minúsculas.

Todos os parâmetros comuns específicos do efeito foram discutidos neste tutorial junto com os efeitos.

Efeitos de combinação

Todos os efeitos de combinação são baseados nos cinco efeitos principais e são considerados exemplos para permitir que você escreva seus próprios efeitos.

Normalmente, esses efeitos dependem da execução paralela e sincronizada de outros efeitos. Tal execução está prontamente disponível, portanto, criar seus próprios efeitos combinados é muito fácil. Aqui está uma lista de efeitos de combinação -

Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink

Além disso, há o Effect.toggle método utilitário para elementos que você deseja mostrar temporariamente com uma animação Aparecer / Desvanecer, Deslizar ou Cega.

Effect.toggle

Arquivos de biblioteca necessários para efeitos

Para usar os recursos de efeito de script.aculo.us, você precisará carregar o módulo de efeitos. Portanto, seu carregamento mínimo para script.aculo.us será semelhante a este:

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>
	
   <body>
      ...
   </body>
</html>

Funções de efeito de chamada

A maneira correta de iniciar um efeito central é geralmente com o newoperador. Dependendo de suas preferências, você pode usar uma das duas sintaxes -

Sintaxe

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

Essas duas sintaxes são tecnicamente equivalentes. A escolha entre os dois é principalmente sobre seu senso pessoal de estética do código.

Exemplo

Aqui estão duas chamadas equivalentes, para que você possa ver como as sintaxes estão relacionadas, que são muito intercambiáveis -

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });