Fx Options In Jquery

Lsaquolsaquo home jQuery Cycle Plugin Confira Cycle2. O mais recente da linha Ciclo de slideshows. O jQuery Cycle Plugin é um plugin de slides que suporta muitos tipos diferentes de efeitos de transição. Ele suporta pause-on-hover, auto-stop, auto-fit, antes de callbacks, disparadores de clique e muito mais. Ele também suporta, mas não requer, o Plugin de Facilidade. Como Funciona O plugin fornece um método chamado cycle que é invocado em um elemento container. Cada elemento filho do recipiente torna-se um slide. As opções controlam como e quando os slides são transferidos. ScrollRight (clique) As imagens são usadas nestas demos porque elas parecem legais, mas as apresentações de slides não se limitam a imagens. Você pode usar qualquer elemento que você deseja. Visualizar Efeitos Use a página Navegador de Efeitos para visualizar os efeitos disponíveis. Veja Mais Demonstrações e Exemplos O Plugin de Ciclo oferece muitas opções para personalizar sua apresentação de slides. Os valores de opção padrão podem ser substituídos passando um objeto de opção para o método cycle, usando metadados no elemento container ou redefinindo os valores em seu próprio código. Para obter mais informações sobre opções, consulte a página Referência de opções. Agradecimentos Agradecimentos especiais a Torsten Baldes. Matt Oakes, e Ben Sterling para as muitas idéias que me começou a escrever Ciclo em 2007..animate () Uma seqüência de caracteres indicando qual função de alívio para usar para a transição. Um booleano que indica se deve colocar a animação na fila de efeitos. Se for false, 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á-la. Um objeto que contém uma ou mais das propriedades CSS definidas pelo argumento properties e suas correspondentes funções facilitadoras. (Versão adicionada: 1.4) Uma função a ser chamada para cada propriedade animada de cada elemento animado. Esta função fornece uma oportunidade para modificar o objeto Tween para alterar o valor da propriedade antes que ele seja definido. Uma função a ser chamada após 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 a animação em um elemento começa. (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 de um elemento falha ao completar (seu objeto Promise é rejeitado). (Versão adicionada: 1.8) Uma função a ser chamada quando a animação em um elemento é concluída 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 necessário é um objeto simples de 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 descrito abaixo a maioria das propriedades não-numéricas não podem ser animadas usando a funcionalidade básica do jQuery (por exemplo, largura, altura ou esquerda podem ser animadas, mas a cor de fundo não pode ser, a menos que o plugin jQuery. Color seja usado). Os valores de propriedade são tratados como um número de pixels, a menos que especificado de outra forma. As unidades em e podem ser especificadas quando aplicável. Além de 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, 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 deve ser definido com antecedência. Ou, se você quiser animar tamanho de fonte, você usaria fontSize ou o CSS equivalente aposfont-sizeapos em vez de simplesmente aposfontapos. Além de valores numéricos, cada propriedade pode tomar as seqüências aposshowapos. Aposhideapos. E apostoggleapos. Esses atalhos permitem ocultar e exibir animações personalizadas que levam em consideração o tipo de exibição do elemento. Para usar jQueryaposs built-in toggle estado de acompanhamento, a palavra-chave apostoggleapos deve ser consistentemente dado como o valor da propriedade a ser animado. As propriedades animadas também podem ser relativas. Se um valor é fornecido com uma seqüência ou - sequência de caracteres, então o valor de destino é computado adicionando ou subtraindo o número dado do valor atual da propriedade. Nota: Ao contrário dos métodos de animação abreviada como. slideDown () e. fadeIn (). O método. animate () não torna visíveis os elementos ocultos como parte do efeito. Por exemplo, dado (quotsomeElementquot).hide (). Animate (, 500). A animação será executada, mas o elemento permanecerá oculto. Durations são dadas em milissegundos valores mais altos indicam animações mais lentas, não mais rápidas. A duração padrão é 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 fornecido, o início. degrau. progresso. completo. feito. falhou. E sempre callbacks são chamados em uma base por elemento isso é definido para o elemento DOM sendo animado. Se nenhum elemento estiver no conjunto, nenhum callback será chamado. Se vários elementos são animados, o retorno de chamada é executado uma vez por elemento correspondente, e não uma vez para a animação como um todo. Use o método. promise () para obter uma promessa à qual você pode anexar callbacks que disparam 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 inverte esta transição: Figura 2 - Ilustração do efeito de animação especificado A opacidade da imagem já está no seu valor de destino, então esta propriedade não é animada pelo segundo clique. Como o valor de destino 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 nos elementos se a propriedade de estilo de posição é estática. Que é por padrão. Observação: 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 está visível devido ao estouro, jQuery pode recortar esse estouro durante a animação. Fixando as dimensões do elemento original sendo ocultado no entanto, é possível garantir que a animação seja executada sem problemas. Um clearfix pode ser usado para corrigir automaticamente as dimensões do seu elemento principal sem a necessidade de definir isso manualmente. A segunda versão do. animate () fornece uma opção de etapa x2014 uma função callback que é disparada em cada etapa da animação. Esta função é útil para habilitar tipos de animação personalizados ou alterar a animação conforme ela está ocorrendo. Ele aceita dois argumentos (agora e fx), e isso é definido para o elemento DOM 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 um número de propriedades, como elem para o elemento animado, início e fim para o primeiro e último valor da propriedade animada, respectivamente e prop 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, dados dois itens de lista, a função de etapa dispara quatro vezes em cada etapa da animação: Auto-Inicialização Ciclo2 slideshows podem ser inicializados automaticamente simplesmente adicionando o ciclo de classe-slideshow para seu elemento de recipiente de slideshow. Cycle2 irá automaticamente localizar e inicializar uma apresentação de slides para qualquer elemento que contenha este nome de classe. Se você não quiser esse comportamento, em seguida, não adicione a classe ciclo-slideshow à sua apresentação de slides e, em vez disso, initalize a apresentação de slides programmatically invocando o método de ciclo no elemento de recipiente de slideshow: Auto-inicialização não é suportada para slideshows que são adicionados ao DOM Depois que o evento pronto jQuerys disparou. Neste caso, você precisará inicializar programaticamente sua apresentação de slides invocando o método de ciclo como mostrado acima. Você não precisa qualificar seu seletor para a parte do DOM que foi atualizada como Cycle2 não reinicializará uma apresentação de slides em execução se você invocar ciclo nele mais de uma vez. Portanto, é perfeitamente seguro executar o código acima várias vezes sem ter que se preocupar com slideshows que já estão em execução. As opções são definidas no elemento de apresentação de slides usando atributos de nome de opção de ciclo de dados. O nome da opção é sempre em minúsculas e prefixado com data-cycle-. Por exemplo, para definir a velocidade e as opções de velocidade manual, você faria isso: Este é o método preferido para definir as opções de apresentação de slides, pois reduz muito (ou elimina) a necessidade do script de inicialização personalizado. As opções também podem ser definidas programaticamente se você preferir, passando um hash de opções para o método de ciclo. Ao configurar as opções de forma programática, o nome da opção não contém o prefixo do ciclo de dados ea cadeia é camelCased nos hifens: Todas as opções podem ser declaradas com os atributos do ciclo de dados no elemento container e serão herdadas por todos os slides. As opções na tabela abaixo que têm um símbolo de touro podem ser substituídas em elementos de slides individuais de modo a ter propriedades específicas para slides específicos. Esta opção determina se uma apresentação de slides pode ou não avançar do último slide para o primeiro (ou vice-versa). Se definido como falso, uma vez que uma apresentação de slides alcança seu último slide, ele não pode mais avançar para frente, ele só pode avançar para trás. Da mesma forma, quando uma apresentação de slides está exibindo o primeiro slide não pode avançar para trás. Por padrão, uma apresentação de slides avançará sem problemas do último slide para o primeiro. Integer or ratio Essa opção determina se o Cycle2 fornecerá ou não o gerenciamento de altura para a apresentação de slides, o que pode ser muito útil em projetos fluidos ou responsivos. Há três maneiras de usar essa opção: um número inteiro pode ser fornecido para identificar o índice de slides baseado em zero para um slide sentinela, a seqüência de caracteres calc pode ser fornecida para instruir Ciclo2 para calcular o slide mais alto e usá-lo como sentinela uma seqüência de razão Pode ser fornecido que identifica a largura: altura relação de aspecto para o recipiente Por padrão, o slides primeiro slide é usado como o slide sentinela e suas demensões irá controlar a altura do recipiente de slideshow se o recipiente não tem uma altura específica definida através de CSS. Para forçar o contêiner de slides para uma proporção específica, por exemplo, para manter um conjunto de imagens que são 600x400, use uma seqüência de razão como esta: Para desabilitar a gestão de altura, defina este valor de opções como -1 ou false. AutoSelector (uso programático somente) Um seletor jQuery que identifica elementos que devem ser inicializados automaticamente pelo Cycle2. O valor padrão é. cycle-slideshow. Adicione a classe ciclo-slideshow ao seu contêiner de slides e Ciclo2 automaticamente irá localizá-lo e inicializá-lo quando o evento preparado para DOM for acionado. Esse valor só pode ser alterado programaticamente e ele não pode ser alterado após o evento DOM ready disparado. Para alterar, inclua um script como este depois que o Cycle2 tiver carregado e antes do evento pronto disparar: Um seletor que identifica o elemento que deve ser usado para a legenda da apresentação. Por padrão, o Cycle2 procura um elemento com a classe. cycle-caption que existe dentro do contêiner de slides. Uma string de modelo que define como a legenda da apresentação de slides deve ser formatada. O modelo pode referenciar informações de estado em tempo real da apresentação de slides, como o índice de slide atual, etc. O Cycle2 usa modelos simples de estilo Bigode por padrão. ContinueAuto (somente programatic use) Opção que pode ser definida dinamicamente para instruir C2 a parar a transição em um tempo limite. Isso é útil quando você deseja iniciar com uma apresentação de slides automática, mas depois mudar para uma apresentação de slides manual. Esta opção também pode ser uma função que retorna um valor booleano. O número de milissegundos a serem adicionados ou subtraídos do tempo antes da primeira transição do slide. O nome da classe a atribuir aos links prevnext quando eles não podem ser ativados (devido a data-cycle-allow-wrapfalse O valor desta opção não deve incluir um ponto precedente Nome da função de atenuação a ser usada para animações O nome da apresentação de slides Transição para usar. Os seguintes nomes de transição estão disponíveis por padrão e mais podem ser adicionados com os plugins: fade. fadeout. num. and scrollHorz. Determina se o Cycle2 oculta os slides inativos true false wait A opção loader define o comportamento do carregador de imagens Para a apresentação de slides Exemplo Falso Funcionalidade do carregador desactivado Diapositivos de carga verdadeira à medida que as imagens chegam Esperar para que todas as imagens cheguem antes de iniciar a apresentação de slides Definir como false para desactivar o registo de consola O número de vezes que uma apresentação de diapositivos Valor é menor que 1, então a apresentação de slides será contínua. Escolha a 1 para repetir uma vez, etc. Os efeitos de transição a serem usados ​​para o manual (Não transições baseadas no temporizador). A velocidade (em milissegundos) para transições que são iniciadas manualmente, como aquelas causadas clicando um próximo botão ou um link pager. Por padrão, as transições manuais ocorrem na mesma velocidade que as transições automáticas (baseadas no temporizador). Determina se as transições são ou não interrompidas para iniciar novas se as novas forem o resultado de uma ação do usuário (não timer) Seqüência de seleção que identifica o elemento (ou elementos) a ser usado como um disparador para avançar a apresentação de slides. Por padrão, Cycle2 procura um elemento com a classe. cycle-next que existe dentro do contêiner de slides. O evento para ligar a elementos identificados com a próxima opção. Por padrão, Cycle2 vincula eventos de clique. Uma string de seletor que identifica o elemento a ser usado como elemento de sobreposição. Uma sobreposição de slides normalmente fornece informações sobre o slide atual. Por padrão, Cycle2 procura um elemento com a classe. cycle-overlay que existe dentro do contêiner de slides. Uma cadeia de modelo que define como a sobreposição deve ser formatada. O modelo pode referenciar informações de estado em tempo real da apresentação de slides, como o índice de slide atual, etc. O Cycle2 usa modelos simples de estilo Bigode por padrão. Uma seqüência de caracteres de seletor que identifica o elemento a ser usado como o contêiner para links de pager. Por padrão, Cycle2 procura um elemento com a classe. cycle-pager que existe dentro do contêiner de slides. String (css classname) O classname a atribuir a pager links quando um determinado link referencia o slide atualmente visível. O valor desta opção não deve incluir um ponto anterior. String (nome do evento) O tipo de evento que está vinculado nos links do pager. Por padrão, Cycle2 vincula eventos de clique. Defina como true para permitir que os eventos do pager cheguem até o DOM. Isso é útil se você tiver uma âncora dentro do elemento pager e desejar que a âncora seja seguida quando ela é clicada. Uma string de modelo que define como os links de pager devem ser formatados. O modelo pode fazer referência a informações de estado em tempo real da apresentação de slides à medida que cada slide é adicionado. O link de pager padrão é simplesmente um marcador. Cycle2 usa modelos simples de estilo bigode por padrão. Boolean ou string Se true, uma apresentação de slides de execução automática será pausada enquanto o mouse estiver sobre a apresentação de slides. Você também pode especificar uma seqüência de seleção jQuery para o valor, a fim de especificar o elemento (s) para o qual os eventos hover deve ser vinculado. Se true, a apresentação de slides começará em um estado pausado. Uma string de seletor que identifica o elemento (ou elementos) para usar como um disparador para avançar a apresentação de slides para trás. Por padrão, Cycle2 procura um elemento com a classe. cycle-prev que existe no contêiner de slides. String (nome do evento) O tipo de evento vinculado nos links anterior e seguinte. Por padrão, Cycle2 vincula eventos de clique. Identifica um elemento no DOM que contém uma matriz JSON que representa os slides a serem progressivamente carregados na apresentação de slides. Exemplo. Se for verdadeira, a ordem dos slides será randomizada. Isso somente os slides de efeitos que estão inicialmente na marcação, não slides adicionados através do comando adicionar ou via funcionalidade de carregador de imagem Cycle2s. Se true, a apresentação de diapositivos prosseguirá na ordem inversa e as transições que suportam esta opção executarão uma animação inversa. O nome da classe a ser atribuído ao slide ativo. O valor desta opção não deve incluir um ponto anterior. Um objeto que define as propriedades css que devem ser aplicadas a cada slide conforme ele é inicializado (uma vez). Nome da classe a ser adicionada a cada slide. Uma seqüência de seletores que identifica os elementos dentro do contêiner de slides que devem se tornar slides. Por padrão, Cycle2 localiza todos os elementos de imagem que são filhos imediatos do contêiner de slides. A velocidade do efeito de transição em milissegundos. O índice baseado em zero do slide que deve ser exibido inicialmente. Defina como true para ativar o suporte ao gesto de deslizar para avançar ou retroceder a apresentação de slides. O efeito de transição a ser usado para transições disparadas por swipe. Se não for fornecida, a transição declarada no atributo data-manual-fx ou data-fx será usada. Se true, a animação dos slides de entrada e de saída será sincronizada. Se for false, a animação do slide recebido não será iniciada até que a animação do slide de saída seja concluída. O tempo entre as transições de slides em milissegundos. A expressão regular padrão usada para a tokenização de modelo. Determina quando o método updateView é invocado (eo evento é disparado). Se o valor for -1, updateView só será chamado imediatamente após a transição do slide. Se o valor for 0, updateView será invocado durante a transição do slide. Se o valor é 1, updateView é invocado imediatamente após o início de uma transição de slide e novamente imediatamente após a transição. Os comandos são emitidos para slideshows invocando o ciclo no elemento container e passando-o um argumento string, que é o nome do comando. Não é válido emitir um comando para um elemento que não tenha sido previamente inicializado como uma apresentação de slides Cycle2. Adiciona um ou mais slides à apresentação de slides. Slide markup ou jQuery objeto Restaura slideshow DOM para seu estado original (e unbinds eventos). Transita a apresentação de slides para o índice de slides fornecido. Índice de slides com base em zero Para uma apresentação de slides de execução automática. Comandos Declarativos É possível emitir comandos declarativamente usando o atributo data-cycle-cmd. Você pode usar esse atributo em qualquer elemento e Cycle2 usará delegação de eventos para emitir um comando de ciclo quando o elemento for clicado. Por exemplo, para ter um elemento de botão aleatório pausar sua apresentação de slides você pode fazer isso: Quando o botão acima é clicado, Cycle2 irá gerar automaticamente e executar este código para você: Para especificar uma apresentação de slides específica como o destino do comando, use o Data-cycle-context atributo e definir o seu valor para uma seqüência de caracteres que identifica o slideshow desejado: Quando o botão acima é clicado, Cycle2 irá auto-gerar e executar este código para você: E, finalmente, você pode passar um argumento para o ciclo Usando o atributo data-cycle-arg. Por exemplo, para remover o primeiro slide de uma apresentação de slides: Cycle2 emite vários eventos à medida que uma apresentação de slides é executada e você pode vincular a esses eventos para personalizar ou aumentar o comportamento dos slideshows. Todos os eventos de ciclo são acionados no elemento de apresentação de slides e, portanto, podem ser vinculados usando código como: Descrição Assinatura de retorno de chamada Disparado após a apresentação de slides ter concluído a transição para o próximo slide. Ativado imediatamente antes de uma transição para um novo slide. Este é o primeiro evento acionado por uma apresentação de slides e fornece uma oportunidade para substituir as opções de apresentação de slides e métodos de API. O arg de API é um hash de objeto dos métodos de API de instâncias de slideshow. Acionado após a exibição de slides foi destruída pelo comando destroy. Acionado após a apresentação de slides ter terminado devido à opção de loop. Acionado após um slideshow foi totalmente initalizado. Acionado depois que a apresentação de slides começou a avançar devido ao próximo comando. Acionado após a apresentação de slides ter iniciado a transição devido a um evento de link pager. Acionado após a apresentação de slides ter sido pausada como resultado do comando de pausa ou a opção pausa-em-hover. Disparado imediatamente após a execução da lógica de inicialização completa na apresentação de slides. Triggered antes de executar a lógica de inicialização completa na apresentação de slides (mas depois que o conjunto de slides inicial foi adicionado). Acionado depois que a apresentação de slides começou a avançar devido ao comando prev. Acionado após a apresentação de slides ter sido pausada como resultado do comando retomar ou a opção pausa-em-hover. Acionada depois que um slide foi adicionado à apresentação de slides Acionado depois que um slide foi removido da apresentação de slides devido ao comando remover. Acionado após a apresentação de slides ter sido parada pelo comando stop. Acionado após a animação de um ou mais slides foi interrompido devido ao avanço manual do slide ou devido ao comando stop ou destroy ser emitido. Acionado após a inicialização, após uma transição de slide e depois que um slide foi adicionado ou removido. Bits Diversos O hash de opções do Cycle2 contém todas as opções de slideshows detalhadas acima, juntamente com as seguintes partes adicionais do estado em tempo de execução. Os dados de estado são somente leitura.