Jquery Ui Fx Options

JQuery UI Demos jQuery UI oferece uma combinação de interação, efeitos, widgets, utilitários e temas projetados para funcionarem bem juntos ou por conta própria. Jogue com as demonstrações, veja a fonte, crie um tema. Leia a documentação da API e comece a usar jQuery UI hoje. Interações As interações adicionam comportamentos basicos baseados em mouse para qualquer elemento. Você pode criar listas classificáveis, elementos redimensionáveis, arraste os comportamentos de suspensão de amplificador e muito mais com apenas algumas linhas de código. As interações também criam grandes blocos de construção para widgets e aplicativos mais complexos. Widgets são controles de UI completos que trazem a riqueza de aplicativos de desktop para a Web. Todos os widgets fornecem um núcleo sólido com muitos pontos de extensão para customizar o comportamento, bem como suporte a temas completos. Os efeitos adicionam suporte para animar cores e transições de classe, além de fornecer várias facilidades adicionais. Além disso, um conjunto completo de efeitos personalizados estão disponíveis para serem usados ​​ao exibir e ocultar elementos ou apenas para adicionar algum recurso visual. Utilidades usadas pela jQuery UI para criar interações e widgets. Interactions. animate () Uma seqüência de caracteres que indica qual função de flexibilidade para usar para a transição. Um booleano que indica se deseja colocar a animação na fila de efeitos. Se falso, a animação começará imediatamente. A partir de jQuery 1.7. A opção de fila também pode aceitar uma string, caso em que a animação é adicionada à fila representada por essa string. Quando um nome de fila personalizado é usado, a animação não inicia automaticamente, você deve chamar. dequeue (quotqueuenamequot) para iniciá-lo. Um objeto contendo uma ou mais das propriedades CSS definidas pelo argumento de propriedades e suas correspondentes funções de flexibilidade. (Versão adicionada: 1.4) Uma função a ser chamada para cada propriedade animada de cada elemento animado. Esta função oferece a oportunidade de modificar o objeto Tween para alterar o valor da propriedade antes de ser configurado. Uma função a ser chamada depois de cada etapa da animação, apenas uma vez por elemento animado, independentemente do número de propriedades animadas. (Versão adicionada: 1.8) Uma função que é chamada uma vez que a animação em um elemento está completa. Uma função para chamar quando começa a animação em um elemento. (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento é concluída (seu objeto Promise é resolvido). (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento não for concluída (seu objeto Promise é rejeitado). (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento completa ou pára sem concluir (seu objeto Promise é resolvido ou rejeitado). (Versão adicionada: 1.8) O método. animate () nos permite criar efeitos de animação em qualquer propriedade CSS numérica. O único parâmetro requerido é um objeto simples das propriedades CSS. Este objeto é semelhante ao que pode ser enviado para o método. css (), exceto que o intervalo de propriedades é mais restritivo. Propriedades e valores de animação Todas as propriedades animadas devem ser animadas para um único valor numérico. Exceto como indicado abaixo, a maioria das propriedades que não são numéricas não pode ser animada usando a funcionalidade jQuery básica (Por exemplo, a largura, a altura ou a esquerda podem ser animadas, mas a cor de fundo não pode ser, a menos que o plugin jQuery. Color seja usado). Os valores das propriedades são tratados como um número de pixels, a menos que especificado de outra forma. As unidades e podem ser especificadas quando aplicável. Além das propriedades de estilo, algumas propriedades não-estilo, como scrollTop e scrollLeft. Bem como propriedades personalizadas, podem ser animadas. As propriedades CSS da estenografia (por exemplo, fonte, plano de fundo, borda) não são totalmente suportadas. Por exemplo, se você quiser animar a largura da borda renderizada, pelo menos um estilo de borda e largura de borda diferente de quotautoquot devem ser definidos com antecedência. Ou, se você quiser animar o tamanho da fonte, você usaria fontSize ou o Css equivalente aposfont-sizeapos em vez de simples aposfontapos. Além de valores numéricos, cada propriedade pode ter as strings aposshowapos. Aposhideapos. E apostoggleapos. Esses atalhos permitem oculto personalizado e mostra animações que levam em consideração o tipo de exibição do elemento. Para usar jQueryaposs built-in toggle state tracking, a palavra-chave apostoggleapos deve ser sempre fornecida como o valor da propriedade que está sendo animada. As propriedades animadas também podem ser relativas. Se um valor é fornecido com uma sequência principal ou - de caracteres, o valor alvo é calculado adicionando ou subtraindo o número dado do valor atual da propriedade. Observação: ao contrário dos métodos de animação abreviada, como. slideDown () e. fadeIn (). O método. animate () não torna visíveis elementos ocultos como parte do efeito. Por exemplo, dado (quotsomeElementquot).hide (). Animate (, 500). A animação será executada, mas o elemento permanecerá oculto. Durações são dadas em milissegundos, os valores mais altos indicam animações mais lentas, e não mais rápidas. A duração padrão é de 400 milissegundos. As cadeias aposfastapos e aposslowapos podem ser fornecidas para indicar durações de 200 e 600 milissegundos, respectivamente. Funções de retorno de chamada Se for fornecido, o início. degrau. progresso. completo. feito. falhou. E sempre as chamadas de chamada são chamadas por elemento, esta é definida como o elemento DOM que está sendo animado. Se nenhum elemento estiver no conjunto, nenhuma chamada de chamada será chamada. Se vários elementos estiverem animados, o retorno de chamada é executado uma vez por elemento correspondente, não uma vez para a animação como um todo. Use o método. promise () para obter uma promessa à qual você pode anexar retorno de chamada que dispara uma vez para um conjunto animado de qualquer tamanho, incluindo zero elementos. Uso básico Para animar qualquer elemento, como uma imagem simples: Figura 1 - Ilustração do efeito de animação especificado Observe que o valor de destino da propriedade height é apostoggleapos. Como a imagem estava visível antes, a animação encolhe a altura para 0 para ocultá-la. Um segundo clique, em seguida, inverte esta transição: Figura 2 - Ilustração do efeito de animação especificado A opacidade da imagem já está no seu valor alvo, portanto esta propriedade não é animada pelo segundo clique. Como o valor alvo para a esquerda é um valor relativo, a imagem se move ainda mais para a direita durante esta segunda animação. As propriedades direcionais (superior, direita, inferior, esquerda) não têm efeito discernível sobre os elementos se sua propriedade de estilo de posição for estática. Que é por padrão. Nota: O projeto jQuery UI estende o método. animate (), permitindo que alguns estilos não-numéricos, como cores sejam animados. O projeto também inclui mecanismos para especificar animações através de classes CSS em vez de atributos individuais. Nota: se estiver tentando animar um elemento com uma altura ou largura de 0px, onde o conteúdo do elemento é visível devido ao transbordo, o jQuery pode cortar esse excesso durante a animação. Ao corrigir as dimensões do elemento original que está sendo escondido no entanto, é possível garantir que a animação funcione sem problemas. Um clearfix pode ser usado para corrigir automaticamente as dimensões do seu elemento principal sem a necessidade de configurá-lo manualmente. Etapa Função A segunda versão do. animate () fornece uma opção de passo x2014 uma função de retorno de chamada que é disparada em cada etapa da animação. Esta função é útil para habilitar tipos de animação personalizados ou alterar a animação à medida que está ocorrendo. Ele aceita dois argumentos (agora e fx), e isso é definido como o elemento DOM que está sendo animado. agora. O valor numérico da propriedade sendo animado em cada etapa fx. Uma referência ao objeto protótipo jQuery. fx, que contém uma série de propriedades, como elem para o elemento animado, inicial e fim para o primeiro e último valor da propriedade animada, respectivamente, e suporte para a propriedade que está sendo animada. Observe que a função de etapa é chamada para cada propriedade animada em cada elemento animado. Por exemplo, com dois itens de lista, a função de etapa dispara quatro vezes em cada etapa da animação: