$.cssHooks, basicamente é uma extensão para as funções .css() e .animate(), ou melhor dizendo, é uma forma de implementar novas propriedades a estas funções, sem a necessidade de alterar o código fonte, por isto é chamada como extensão. Com $.cssHooks, você pode criar infinitas possibilidades para se trabalhar o CSS com jQuery.
Hook é uma palavra em inglês que significa “gancho“. Aplicado ao nosso assunto ficaria “ganchos CSS” :).
O plugin jQuery Rotate, que ilustra bem como funciona $.cssHooks. Vamos a introdução para aprender e criar nossos próprios CSS Hooks:
Para cada extensão que você for desenvolver, há dois métodos base, para o funcionamento da propriedade: get e set. O primeiro diz respeito a recuperar o valor da propriedade e o segundo é setar/alterar o valor da propriedade no elemento. É possivel adicionar mais métodos (para uso interno por exemplo), mas vale lembrar que jQuery utiliza apenas esses dois métodos (get e set).
Cada método, recebe os parâmetros necessários para o desenvolvimento do mesmo. Observe o uso da função .css() para você entender melhor:
$('div').css('nomeDapropriedade', 'valorDaPropriedade'); //jQuery irá chamar o método SET, porque há um parâmetro adicional na função, para setar o valor
De início, vamos alterar o método get, que já está feito. Será necessário alterar apenas uma linha. Se estivesse com a cor azul, retornaria true, agora irá retornar a cor, no lugar do true:
Assim o método irá checar se a cor do elemento está na array (var azul), se tiver retornará a cor, se não retornará false.
Não vai ter muito sentido testar o resultado em um navegador que não seja o IE. Todos os demais, que tem suporte a cor RGB, converte a cor para RGB para depois setar a cor. Chece o resultado com o alert disponível no código, depois remova ou comente… você irá ver que funciona corretamente…
É isto… Foi um exemplo básico e é claro que é possivel criar propriedades bem melhores que esta, basta ter uma boa imaginação e mandar ver no código.