A estrutura de efeitos da jQuery UI é modularizada, assim como a estrutura de widgets, permitindo que você escolha quais partes do pacote você deseja usar e reduza os requisitos de código. Você pode crie um download personalizado para você, que leva em conta as dependências entre os módulos.
Antes de ver como criar um novo efeito, você deve estar ciente da outra funcionalidade já oferecida pela estrutura de efeitos da interface do usuário do jQuery, para que você possa usá-la ao desenvolver seus próprios efeitos.
Subjacente aos módulos de efeitos individuais da jQuery UI é um núcleo da funcionalidade comumente usada. Essas habilidades são implementadas aqui para que você não precise reinventá-las e aplicá-las imediatamente aos seus próprios efeitos. Juntamente com a animação de cores, você encontrará animações dos atributos de uma classe para outra e várias funções de baixo nível que podem ser úteis no desenvolvimento de novos efeitos.
O módulo Effects Core adiciona suporte de animação personalizado para atributos de estilo que contêm valores de cores: cores de primeiro e segundo plano e cores de borda e contorno. O próprio jQuery permite apenas a animação de atributos que são valores numéricos simples, com um designador de unidades opcional, como px, em ou%. Ele não sabe como interpretar valores mais complexos, como cores, ou como incrementar esses valores corretamente para alcançar a transição desejada, como de azul para vermelho através de uma cor roxa intermediária.
Os valores de cor são compostos de três componentes: as contribuições vermelha, verde e azul, cada uma com um valor entre 0 e 255. Elas podem ser especificadas em HTML e CSS de diversas maneiras, conforme listado aqui:
Os componentes vermelho, verde e azul devem ser separados e animados individualmente de seus valores iniciais aos finais, antes de serem combinados na nova cor composta para as etapas intermediárias. A IU do jQuery adiciona etapas de animação para cada atributo afetado para decodificar corretamente as cores atuais e desejadas e para alterar o valor à medida que a animação é executada. Além dos formatos de cores descritos na lista anterior, a chamada animada também pode aceitar uma matriz de três valores numéricos (cada um entre 0 e 255) para especificar a cor. Depois que essas funções estiverem definidas, você poderá animar as cores da mesma forma que faria para outros atributos numéricos:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI contém uma lista expandida de cores nomeadas que ele entende, desde o básico vermelho e verde até o darkorchid e o darksalmon mais esotéricos. Existe até uma cor transparente.
JQuery padrão permite adicionar, remover ou alternar classes em elementos selecionados. jQuery UI vai melhor, permitindo que você anime a transição entre os estados antes e depois. Ele faz isso extraindo todos os valores de atributos que podem ser animados (valores numéricos e cores) das configurações inicial e final e, em seguida, chamando uma chamada padrão animada com todas elas como propriedades a serem alteradas. Essa nova animação é acionada especificando uma duração ao chamar as funções addClass, removeClass ou toggleClass:
$('#myDiv').addClass('highlight', 1000);O jQuery UI também adiciona uma nova função, switchClass, que remove uma classe e adiciona uma classe, com a transição opcional entre os dois estados (ao fornecer uma duração):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Para melhor suportar os vários efeitos da interface do usuário do jQuery, o módulo Effects Core fornece várias funções que são úteis para esses efeitos e, talvez, para o seu próprio. Para ilustrar como várias dessas funções são usadas, a listagem a seguir mostra as partes relevantes do efeito de slide.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Você pode usar a função setMode para converter um modo de alternar para o show ou ocultar o valor apropriado com base na visibilidade atual do elemento. Se o modo fornecido for show ou hide, ele reterá esse valor e, nesse caso, o padrão será show, se não for fornecido.
Antes de iniciar a animação para o efeito, você pode querer usar a função save para lembrar os valores originais de vários atributos (dos nomes em adereços) no elemento, para que eles possam ser restaurados quando terminar. Os valores são armazenados no elemento usando a função de dados jQuery.
Para facilitar o movimento de um elemento para um efeito, você pode envolver um contêiner em torno desse elemento com a função createWrapper para usar como ponto de referência para o movimento. A informação posicional é copiada do elemento especificado para o wrapper, de modo que apareça diretamente sobre o elemento original. O elemento é então posicionado dentro do novo contêiner no canto superior esquerdo, de modo que o efeito geral seja imperceptível pelo usuário. A função retorna uma referência ao wrapper.
Quaisquer alterações nas configurações esquerda / direita / superior / inferior do elemento original agora serão relativas à sua posição original, sem afetar os elementos adjacentes. Tendo salvo alguns valores de atributo anteriormente, você usaria a função de restauração na conclusão da animação para retorná-los às configurações originais. Ao mesmo tempo, você deve remover qualquer wrapper criado anteriormente com a função remove-Wrapper. Essa função retorna uma referência ao wrapper, se ele foi removido, ou ao próprio elemento, se não houver wrapper.
Existem algumas outras funções fornecidas pelo módulo jQuery UI Effects Core que podem ser úteis:
getBaseline (origin, original) Essa função normaliza uma especificação de origem (uma matriz de dois elementos de posições vertical e horizontal) em valores fracionais (0.0 a 1.0), dado um tamanho original (um objeto com atributos de altura e largura). Ele converte as posições nomeadas (superior, esquerda, central e assim por diante) em valores 0,0, 0,5 ou 1,0 e converte valores numéricos na proporção da dimensão relevante. O objeto retornado possui os atributos x e y para manter os valores fracionários nas direções correspondentes. Por exemplo,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (elemento, lista, fator, valor) Para aplicar um fator de escala a vários valores de atributo de uma vez, use esta função. Para cada nome de atributo na lista, recupere seu valor atual para o elemento e atualize-o multiplicando-o por fator. Defina o resultado no objeto de valor sob o nome do atributo e retorne esse objeto da função. Por exemplo, para reduzir determinados valores pela metade, você pode fazer isso:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (chave) Para separar um atributo CSS (chave) nomeado em sua quantidade e unidades (em, pt, px ou%), retornado como uma matriz de dois valores, use esta função. Se as unidades não forem um desses tipos conhecidos, uma matriz vazia será retornada. Por exemplo,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']As funções apresentadas nesta seção são usadas por muitos dos efeitos fornecidos pela interface do usuário do jQuery. Esses efeitos são revisados na próxima seção.
Vários efeitos são fornecidos pela interface do usuário do jQuery. A maioria deles é projetada para melhorar como um elemento aparece ou desaparece (como cegar e soltar), enquanto outros servem para chamar sua atenção para um elemento (como realçar e agitar):
Esses efeitos podem ser usados em conjunto com as funções aprimoradas show, hide e toggle do jQuery UI, fornecendo o nome do efeito desejado como o primeiro parâmetro. Você também pode fornecer opções adicionais que alteram o comportamento do efeito, a duração da animação e uma função de retorno de chamada que é acionada na conclusão.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Incluídos nos módulos da IU do jQuery estão algumas funções básicas do utilitário, comportamentos de baixo nível (como arrastar e soltar), componentes ou widgets de alto nível (como Tabs e Datepicker) e vários efeitos visuais. Você pode usar esses efeitos para aprimorar a apresentação de elementos em sua página da Web ou para chamar um elemento específico para a atenção do usuário. Para ajudá-lo a criar seus próprios efeitos, há um núcleo de funções comumente usadas disponíveis.
Você já usou o framework de efeitos da jQuery UI? Como se compara com as interpolações de CSS nativas? Deixe-nos saber seus pensamentos nos comentários.