Categorias
CSS Programação

Hover Fade simples em JQuery

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!



Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *