Bonsoir.
tout dabors je voudrai savoir s'il existe un plugin comme pour donnée cette effet au images quand la sourie est sur le carré le div s'affiche, quand la sourie quit le carré le div décent en bas.
je fais un petit truc mais sa marche pas au top, si je bouge la sourie trop vite le mouseout ne s'effectue pas.
voila une partie du code
ps j'ai essayer d'autre événement comme mouseover mouseout mais sa marche pas très bien aussi, du genre le mouseout se déclenche a l'intérieur du carré...
Modifié par nemesisTHEone (06 Oct 2008 - 21:04)
tout dabors je voudrai savoir s'il existe un plugin comme pour donnée cette effet au images quand la sourie est sur le carré le div s'affiche, quand la sourie quit le carré le div décent en bas.
je fais un petit truc mais sa marche pas au top, si je bouge la sourie trop vite le mouseout ne s'effectue pas.
voila une partie du code
<div class="galerie_case">
<div class="galerie_mini">
<img alt="Vadasa Hnos." src="images/galerie/thumb_image1.jpg" width="211" height="108" />
<div class="galerie_description">
<a href="images/galerie/image1.jpg" title="test">
<p class="title"><strong>blabla.</strong></p>
<p class="body">blabla</p>
</a>
</div>
</div>
$(document).ready(function() {
$('.galerie_mini > img').each(function() {
$(this).mouseover(function() {
var carre = $(el).next('.galerie_description');
var pos = carre.css('top');
pos = pos.substring(0, pos.length-2);
if ( pos > 0 ) {
carre.animate({"top": "-="+pos+"px",opacity: 0.85},{ duration: 100,queue: true }).addClass('activated');
}
return false;
});
});
$('.galerie_description').each(function() {
$(this).hover(function() {
$(this).addClass('activated');
return false;
},function() {
var actuel = $(this).css('top');
actuel = actuel.substring(0, actuel.length-2);
if ( actuel > -1 && actuel < 116 ) {
var dest = 116 - actuel;
$(this).animate({"top": "+="+dest+"px"},{ duration: 50,queue: false }).removeClass('activated');
}
return false;
});
});
});
.galerie_case {
float: left;
background: url(../images/cadre_mini.gif) no-repeat left top;
padding: 8px;
margin: 1em;
}
.galerie_mini {
width: 225px;
height: 108px;
position: relative;
overflow: hidden;
}
.galerie_mini > img {
display: block;
height: 100%;
margin-bottom: 10px;
}
.galerie_mini div {
position: absolute;
z-index: 100;
top: 116px;
left: 0px;
height: 112px;
width: 211px;
background: #000;
color: #FFF;
}ps j'ai essayer d'autre événement comme mouseover mouseout mais sa marche pas très bien aussi, du genre le mouseout se déclenche a l'intérieur du carré...
Modifié par nemesisTHEone (06 Oct 2008 - 21:04)
)