[Resolvido] Como fazer um Overlay no jQuery?

[Bruno Batista 3]

Tenho tentando fazer com que este projeto funcione o máximo em todos os navegadores, desde os mais antigos como ie6 aos mais modernos como Firefox 4.0.

 

Clique aqui para ter acesso ao site.

 

HTML

<ul class="full_overlay">
         <li class="content">
           <h2>Informações Adicionais</h2>
           <p><strong>Combustível:</strong> Flex<br />
             <strong>Câmbio:</strong> Manual<br />
             <strong>Cor:</strong> Vermelho<br />
             <strong>Placa:</strong> J*****8<br />
             <strong>Estado de Uso:</strong> Usado<br />
             <strong>Kilometragem:</strong> 73.642<br />
             <strong>Vendedor:</strong> Souza Veiculos</p>
         </li>
         <li>
           <figure><img class="top" src="image.php?src=images/cars/slide1.jpg&w=245&h=184&q=60&m=images/watermark_small.png" width="245" height="184" alt="" /></figure>
         </li>
       </ul>

 

CSS

/* full overlay */
.full_overlay {
float: left;
position: relative;
}
.full_overlay li {
width: 245px;
height: 184px;
}
.full_overlay .content {
position: absolute;
left: 0px;
width: 245px;
height: 184px;
filter: alpha(opacity=0);
opacity: 0;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: #000000;
background: rgba(0,0,0,0.8);
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.full_overlay:hover .content {
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.full_overlay h2 {
font-size: 16px;
padding: 10px;
color: #fff;
}
.full_overlay p {
color: #fff;
line-height: 16px;
padding: 0 10px;
text-transform: none;
font-weight: 700;
}
.full_overlay strong {
line-height: 16px!important;
color: #cc6666!important;
}
.full_overlay .top {
top: 0px;
}

 

Tinha criado essa função assima com CSS3, agora preciso saber como posso far o mesmo usando jQuery.

 

Desde-ja agradeço aos amigos.

[relaxeaza 0]

Não testei mais acho que isso serve:

 

$('.full_overlay .content').mouseover(function() {
$(this).show(400);
}).mouseout(function() {
$(this).hide(400);
});

 

Remova as seguintes propriedades css ".full_overlay .content {}"

-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;

 

Remova o css ".full_overlay:hover .content {}"

 

Qualquer coisa so falar.

[Bruno Batista 3]

Ta quase la, ele fica num loop.

 

Mais obrigado pela ajuda!

[Patrique 0]

Mete um stop que resolve

 

$('.full_overlay .content').mouseover(function() {
       $(this).stop().show(400);
}).mouseout(function() {
       $(this).stop().hide(400);
});

 

[]'s

[Bruno Batista 3]

Amigos obrigado pela ajuda!

 

A Solução fico assim:

/* Full overlay */
$(function () {
   $('.full_overlay .content').hide();
   $('.full_overlay').mouseenter(function () {
       $(this).find('.content').stop(true, true).fadeIn('slow');
   }).mouseleave(function () {
       $(this).find('.content').stop(true, true).fadeOut('slow');
   })
});

 

Créditos aos amigos da comunidade e á Fernando da Proejte Web e Carlos Gustavo!

 

Resolvido

[Patrique 0]

Bacana, que bom que foi resolvido, ficou legal.

 

[]'s