Neste artigo vamos ver com é fácil a criação de um simples plugin Hover Fade para JQuery.
Desde o lançamento do jQuery em 2006, jQuery rapidamente se tornou a mais popular biblioteca JavaScript e de escolha para todos os profissionais web. Atualmente existem centenas de plugins disponíveis para quase qualquer coisa possamos querer fazer, com jQuery, pode apenas fazer download e começar a usar os plugins maravilhosos no seu projeto, de imediato. Mas há momentos em que queremos criar o nosso próprio plugin jQuery, vamos descobrir o quão fácil é criar um plugin jQuery.
Vamos ver o básico para a criação de um plugin para jQuery. Vamos criar um plugin chamado hoverfade. Este plugin terá apenas a tarefa de fade-in e fade-out do elemento quando o ponteiro do rato entra e ou sai da sua área.
Bibliotecas
Em primeiro lugar, antes de tudo, vamos chamar a biblioteca do jQuery, esta chamada é feito no header. Logo após a chamada da biblioteca principal do jQuery, chamamos a nossa.
<head> <script src="jquery.js"></script> <script src="hoverfade.jquery.js"></script> </head>
Plugin
Neste ponto começamos a criar o nosso plugin propriamente dito, no próximo código estarei a comentar linha a linha para ficarem a entender perfeitamente o que cada uma faz.
(function($) { $.fn.hoverfade = function() { // utilizamos isto para juntar a nossa função ao jquery $(this).fadeTo("fast", 0.30); // quando lê a pagina os elemento começam com pouca opacidade (30%) this.mouseenter(cima).mouseleave(ncima); // chama as funções abaixo function cima() { // quando o rato estar em 'cima' $(this).fadeTo("fast", 1); //opacidade 100% } function ncima() { // quando o rato deixa de estar em 'cima' $(this).fadeTo("fast", 0.30); //opacidade 30% } } })(jQuery);
Correr o Plugin
Agora podemos utilizar o nosso plugin nos elementos da nossa pagina.
<script type="text/javascript"> $(document).ready(function() { $('.fader').hoverfade(); }); </script>
HTML
Agora é só juntar isto a nossa pagina, e aplicar o nosso plugin ao elementos que queremos, no próximo código fazemos o nosso plugin funcionar.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> <script src="hoverfade.jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.fader').hoverfade(); }); </script> <style> .fader{ float:left; margin:10px; } </style> </head> <body> <div class="fader"><img src="1.jpg" id="image" width="200" height="150"></div> <div class="fader"><img src="2.jpg" id="image" width="200" height="150"></div> <div class="fader"><img src="3.jpg" id="image" width="200" height="150"></div> </body> </html>
Dá minha parte é tudo, até a próxima! Não se esqueça de comentar!