Olha eu aqui de novo. Passei os dois últimos dias criando um script bem legal. Podem até existir outros parecidos, mas esse é um daqueles que posso dizer que é 100% meu (exceto pela função addEvent).

Ele tem um único objetivo: fazer um efeito abre-fecha em algum elemento. Não muito útil, mas é um efeito visual interessante de se fazer. Me diverti criando e vendo divs abrindo e fechando.

O código é o seguinte (versão 1.1, atualizada):

var JsGlide = {
  attachGlide: function(elToAttach, event, opt) {
    var fn = this.glide;
    this.addEvent(elToAttach, event, function() { fn(opt) });
  },
  glide: function(opt) {
    var intSpeed = Math.round(opt.duration / 100);
	var intETime = opt.duration;
	var elToGlide = opt.elToGlide;
	if( opt.width[0] < opt.width[1] ) {
      var hSpeed = opt.height[1] / (opt.duration / intSpeed);
      var wSpeed = opt.width[1] / (opt.duration / intSpeed);
	  var iHeight = opt.height[0];
	  var iWidth = opt.width[0];
      setTimeout(function() {
        iHeight += hSpeed;
        iWidth += wSpeed;
        elToGlide.style.width = iWidth + "px";
        elToGlide.style.height = iHeight + "px";
        intETime -= intSpeed;
        if(intETime > 0) setTimeout(arguments.callee, intSpeed);
		else if(typeof(opt.fnOnEnd) == "function") opt.fnOnEnd();
      }, intSpeed);
	}
	else if( opt.width[0] > opt.width[1] ) {
      var hSpeed = opt.height[0] / (opt.duration / intSpeed);
      var wSpeed = opt.width[0] / (opt.duration / intSpeed);
	  var iHeight = opt.height[0];
	  var iWidth = opt.width[0];
      setTimeout(function() {
        iHeight -= hSpeed;
        iWidth -= wSpeed;
        elToGlide.style.width = iWidth + "px";
        elToGlide.style.height = iHeight + "px";
        intETime -= intSpeed;
        if(intETime > 0) setTimeout(arguments.callee, intSpeed);
		else if(typeof(opt.fnOnEnd) == "function") opt.fnOnEnd();
      }, intSpeed);
	}
  },
  addEvent : function(obj, type, fn) {
    if (obj.addEventListener)
	  obj.addEventListener(type, fn, false);
	else if (obj.attachEvent) {
	  obj["e"+type+fn] = fn;
	  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
	  obj.attachEvent("on"+type, obj[type+fn]);
	}
  }
}

É meio difícil explicar tudo isso aí. O uso “cego” também é meio complicado, pois usa JSON (não sei porque, mas adorei isso aí). A criação levou tempo, mas não foi muito difícil. A parte complicada foram os cálculos, principalmente onde está a variável intSpeed. Foi onde mais tive problemas.

Utilização

A utilização é extremamente simples, já que o script faz tudo sozinho. Só é preciso configurar uma variável JSON para cada glide.

Em meus testes, usei a seguinte marcação

<div id="glide" style="width: 100px; height: 100px; background:  #ff0; ">Efeito Glide - Abre-Fecha</div>
<input type="button" value="Abrir Glide" id="btnOpen" />
<input type="button" value="Fechar Glide" id="btnClose" />

Os botões receberão os eventos onclick, e abrirão e fecharão a div.

Na atualização do script modifiquei um pouco a função, e o JSON ficou um pouco diferente.

var jsonOpen = {
  "width": [0,100],			// largura inicial/final
  "height": [0,100],  		// altura inicial/final
  "duration": 500,			// duração do efeito
  "elToGlide": document.getElementById("glide"),
  "fnOnEnd": onGlideOpen	// função a ser executada ao final do efeito
}
var jsonClose = {
  "width": [100,0],			// largura inicial/final
  "height": [100,0],  		// altura inicial/final
  "duration": 500,			// duração do efeito
  "elToGlide": document.getElementById("glide"),
  "fnOnStart": onGlideClose	// função a ser executada ao início do efeito
}
JsGlide.addEvent(window, "load", function(){  // Eventos adicionados quando carregamento estiver completo
  JsGlide.attachGlide(document.getElementById("btnOpen"), "click", jsonOpen); // Anexar "open"
  JsGlide.attachGlide(document.getElementById("btnClose"), "click", jsonClose); // Anexar "close"
})

Como se nota, tem duas funções que devemos criar. Isso tira das “costas” do script cuidar de tamanho da fonte, innerHTML… Fica difícil criar tudo isso, e acho que assim fica até melhor um pouco. As funções são as seguintes:

function onGlideOpen() {
  var element = document.getElementById("glide");
  element.style.fontSize = "100%";
  element.innerHTML = "Abrimos o Glide, e adicionamos um innerHTML";
}
function onGlideClose() {
  var element = document.getElementById("glide");
  element.innerHTML = "";
  element.style.fontSize = 0;
}

Nesse JSON, temos as seguintes opções:

• fnOnEnd: Função a ser executada ao final do efeito
• fnOnStart: Função a ser executada ao início do efeito
• duration: Duração, em milissegundos, do efeito
• elToGlide: Elemento a receber o efeito. Deve ser obrigatoriamente um objeto.
• width: Array com as larguras do elemento, assim [inicial, final]
• height: Array com as alturas do elemento, assim [inicial, final]

E aí está o nosso efeito. Não sei se fui suficientemente claro, qualquer coisa é só comentar.

Limitações

Não descobri nenhuma limitação no script. As que foram reportadas já foram corrigidas antes de publicar aqui. Mas como nada é perfeito, ele tem alguns requisitos:

• A única unidade de tamanho suportada é o pixel. Podem ser implementadas outras, mas optei por somente essa.
• Você é quem cuida de innerHTML e tamanho das fontes. Eu sei que não é nada muito prático, mas foi a melhor coisa em que pensei.
• O JSON aumentou bastante em relação a primeira versão. Também foi a melhor coisa que consegui pensar.

Qualquer um que tenha uma sugestão para melhorar, comente aí embaixo. Dúvidas, idem.

Espero que tenham gostado. Até!