CSS no Lanche

jQuery Delay Plugin é um plugin desenvolvido para jQuery criado para que possamos definir um tempo de espera antes da execução de uma função específica:

$(document).ready(function(){

	// Ao clicar no link é disparada a funcao
	$("a").click(function(){

		// Delay de 1 segundo...
		$(this).delay(1000,function(){

			// É mostrada a div com o efeito slideToggle
			$("div").slideToggle('slow');

			// Agora temos um Delay de 3 segundos
			$(this).delay(3000,function(){

				// Mudamos a cor de fundo da Div para azul
				$("div").css("backgroundColor","blue");

			});

		});

	});
});

Vocês podem ver o plugin em ação nesse link.

Mostrar ao usuário de forma criativa que determinado link de seu site faz referência a outro, é uma boa regra de usabilidade, você pode fazer isso com CSS, de uma forma bem simples, mas infelizmente não irá funcionar no Internet Explorer, ou você pode fazer isso através de JavaScript. Caso você não seja ninja nessa arte, pode fazer isso facilmente com jQuery.

O que basicamente é feito pelo JavaScript é testar se o location.hostname, o link do hostname, é o mesmo representado no this.hostname. Basicamente ele efetua o seguinte teste: this.hostname && location.hostname !== this.hostname.

A função filter()

Nesse exemplo vamos utilizar a função filter() para testar todos os nossos links, vejam uma descrição do script abaixo:

$(document).ready(function() {
  		$('a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
  		}).after(' <img src="external.png" alt="external link" />');
	});

A função irá verificar os links, e se achar algum link externo ao meu site, adiciona-rá uma imagem indicando isso. Exemplo do script em ação.

Esse tutorial é uma adptação do original de: Learning jQuery.