jQuery: Como evitar problemas com animate()

Postado por: Pedro Rogério em
  • 8 jun
  • 11

Você provavelmente já deve ter passado por esse tipo de problema utilizando o framework jQuery para fazer animações nos elementos de sua página, o problema ocorre principalmente quando se deseja criar menus animados, onde através da função animate() da jQuery ao passar o mouse rapidamente pelo menu, o efeito pode ser executado ainda diversas vezes mesmo após você retirar o mouse.

Para que fique claro a natureza do problema, basta você acessar esse exemplo criado e experimente passar o mouse rapidamente diversas vezes encima do menu. Você verá que mesmo após retirar o mouse, o efeito de animate() ainda é executado.

Observe abaixo o código JavaScript com a utilização da jQuery para o efeito do menu:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).animate({ left: 20 }, 'fast');
		},function(){
		$(this).animate({ left: 0 }, 'fast');
	});
});

Para evitar esse problema indesejável, basta utilizar a função stop(). Agora vamos ao código final sem problemas de animação:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).stop().animate({ left: 20 }, 'fast');
		},function() {
		$(this).stop().animate({ left: 0 }, 'fast');
	});
});

Agora observem o exemplo com o código corrigido. Como você pode ver, a animação só ocorre uma vez, mesmo após você passar rapidamente o mouse sobre o menu, evitando assim o problema anterior.

Esse post foi escrito com base no artigo original de Brandon Aaron

Alternativa a Google AJAX Libraries API

Postado por: Pedro Rogério em
  • 20 mai
  • 3

O Google que até então parecia um serviço indestrutível não é mais o que parece. Após quedas relatadas no Twitter, o que podemos fazer se dependemos desse serviço? Ainda mais aqueles que dependem da Google AJAX Libraries API para que suas aplicações fucionem.

Recentemente descobri uma alterantiva ao Google AJAX Libraries API, onde caso o serviço esteja off-line, ele utiliza o arquivo JavaScript que está hospedado em seu servidor. Basicamente você teria que criar um arquivo JavaScript e colocá-lo antes do fechamento da tag body:

<script type="text/javascript" src="meu-script-google.js"></script>

O conteúdo desse arquivo deve ser o seguinte:

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC do Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.pinceladasdaweb.com.br/blog/js/jquery-1.3.2.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tempo em milisegundos antes de carregar o arquivo local.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

É uma ótima alternativa, pois caso o serviço fique indisponível, é carregado um JavaScript alternativo.

Colunas com alturas iguais com JavaScript

Postado por: Pedro Rogério em
  • 13 mai
  • 6
Colunas com alturas iguais em CSS

Imagem retirada do site de Matthew James Taylor

Quem já não passou pelo problema de que as colunas do site não acompamhavam o tamanho das outras colunas e assim acarretando algumas vezes “quebras de layout”? Pois bem, já postei aqui uma solução não muito bem aceita utilizando CSS, mas dessa vez vamos implementar uma solução com JavaScript e uma outra com a utilização do Framework jQuery.

A primeira solução que utiliza JavaScript puro foi desenvolvida por Matthew Pennell, e o código e sua utilização consistem da seguinte forma. Primeiro você irá precisar de uma função para capturar os elementos da página:

Continuar lendo »

Ajax com jQuery – Método load()

Postado por: Pedro Rogério em
  • 11 mai
  • 27

jQuery oferece bastante funcionalidades Ajax que podem facilitar a tarefa de enviar e fazer requisições asíncronas no servidor. O método mais simples de jQuery para carregar conteúdo através de Ajax é o load(). Esse post tratará de forma simples este comando para mostrar as diferentes formas de uso.

Sintaxe

load(url,parametros,callback)

Inicia uma requisição Ajax a URL solicitada com parâmetros opcionais. Você pode especificar uma opção de callback, que pode ser chamada quando a requisição está completa.

Argumentos

  • url: A URL que é solicitada a requisição.
  • parâmetros: Um objeto cuja propriedades são serializadas em uma série de parâmetros codificados corretamente e que se passam a requisição. Se utilizado, deve-se especificar se a requisição utiliza o método POST, caso contrário, se omitido, a requisição utiliza o método GET.
  • callback: Uma função chamada após a solicitação já ter sido processada.

Continuar lendo »

APNG – Animated Portable Network Graphics

Postado por: Pedro Rogério em
  • 4 mar
  • 10

O formato de arquivo APNG (Animated Portable Network Graphics) é uma extensão de imagens animada do PNG (Portable Network Graphics). Ele permite imagens animadas que funcionam de forma semelhante aos arquivos de formato GIF animado, mantendo a compatibilidade com arquivos PNG sem animação. Sua finalidade principal é considerada no uso dos aplicativos GUI e XUL.

O primeiro quadro de um arquivo APNG é armazenado como um fluxo PNG normal, e portanto a maioria dos decodificadores PNG antigos poderão exibir o primeiro quadro de um arquivo APNG. O quadro velocidade dos dados e quadros de animação extra são armazenados em blocos extras (conforme fornecido pela especificação PNG original).

APNG compete com Multiple-image Network Graphics (MNG), um formato poderoso para animações bitmap, criado pela mesma equipe do PNG. A vantagem do APNG é o menor tamanho da biblioteca e compatibilidade com as implementações mais antigas do PNG.

Continuar lendo »

Live event binding com jQuery 1.3

Postado por: Pedro Rogério em
  • 15 fev
  • 6

jQuery 1.3 introduziu um novo recurso chamado live event binding que simplifica anexar eventos aos elementos já existentes como para elementos futuros. Isso é muito útil, pois utilizando o método antigo bind() são atribuídos eventos aos manipuladores que já estão presentes no DOM no momento em que o evento é vinculado. Com live() você pode escrever seu evento e possuir caráter vinculado, uma vez que ele é anexado a futuros elementos criados.

Não tive desculpa para utilizar esse recurso ainda, por isso, decidi criar um exemplo trivial para demonstrar. Neste exemplo, eu tenho uma lista com 3 elementos desordenados. Clicar nos itens irá removê-los da lista. Haverá também um link que com a opção de anexar novos itens(que deve também ter a opção de clicar e remover).

Em ambos os casos, essa é a marcação que será utilizada:

<a href="#" class="add">Adicionar item</a>
<ul id="items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
</ul>

Nota: Eu irei utilizar bind(‘click’, fn) ao invés de elm.click(fn) simplesmente por que a sintaxe é mais parecida com o live().

Continuar lendo »

Páginas:«1234567...13»