Ir para homeMateus Souza – Webdesigner

Image Fade – Tutorial Jquery

Criado por Mateus Souza em 23 de setembro de 2008 às 20:14

Vamos recriar o efeito usado no site Dragon Interactive, vai ficar igualzinho, até em inglês:),não vou entrar em detalhes só vou mostrar como funciona e o código, pois acho que você já deve estar cansado de alguns processos utilizados em tutoriais anteriores e já deve saber como fazer.Mas se você é novo aqui no site e tal, veja meus tutoriais mais antigos é bem fácil, basta clicar aqui.

Demostração:
Aqui

HTML:

<ul id="navigation">
    <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
    <li class="highlight"><a href="#" class="services"><span>Services</span></a></li>
    <li class="highlight"><a href="#" class="portfolio"><span>Portfolio</span></a></li>
    <li class="highlight"><a href="#" class="about"><span>About</span></a></li>
    <li class="highlight"><a href="#" class="contact"><span>Contact</span></a></li>
</ul>

CSS

#navigation {
  list-style: none;
}

#navigation li {
  float: left;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
	position: relative;
	display: block;
	background: url(images/dragon-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}

#navigation a.services {
  background-position: -102px -140px;
  width: 115px;
}

#navigation .highlight a.services:hover,
#navigation a.services .hover {
  background-position: -102px -280px;
}

#navigation a.portfolio {
  background-position: -217px 0;
  width: 120px;
}

#navigation .highlight a.portfolio:hover,
#navigation a.portfolio .hover {
  background-position: -218px -280px;
}

#navigation a.about {
  background-position: -337px 0;
  width: 100px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -339px -280px;
}

#navigation a.contact {
  background-position: -437px 0;
  width: 115px;
}

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -440px -280px;
}

jQuery

 $(function () {
        if ($.browser.msie && $.browser.version < 7) return;

        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);
                    });
                });

    });

Se você quiser ver o vídeo do cara que recrio esse efeito – pois não foi eu – veja logo abaixo:

Ver video (Versão em flash)

IE6 – Se você usa o IE6 é recomendável ver este video (Versão em flash)

Qualquer dúvida posta um comentário.

Postado em CSS, HTML, Javascript, Tutoriais, jQuery.