jQuery Plugin pour glisser le texte sur hover?

Question

Je sais que j'ai vu quelque chose de similaire en ligne mais je n'ai pas un bon exemple. J'espérais qu'il pourrait y avoir une sorte de plug-in avec l'ensemble de structure que je pourrais concevoir autour.

Vous cherchez à accomplir quelque chose comme ceci: http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

Toutes les idées?

Answer 1

(Note: Voir l'exemple en bas pour éditée solution plus robuste)

Un point de jQuery est de pouvoir accomplir tout ce genre de comportement dynamique facilement, donc je ne pense pas que vous avez besoin d'un plug-in spécial. Click here to see the following code in action

HTML

<div id="container"> 
    <div id="hover-area">HOVER</div> 
    <div id="caption-area"> 
     <h1>TITLE</h1> 
     <p>Caption ipsum lorem dolor 
      ipsum lorem dolor ipsum lorem 
      dolor ipsum lorem dolor</p> 
    </div> 
</div>​ 

CSS

#container { 
    cursor:pointer; 
    font-family:Helvetica,Arial,sans-serif; 
    background:#ccc; 
    margin:30px; 
    padding:10px; 
    width:150px; 
} 
#hover-area { 
    background:#eee; 
    padding-top: 60px; 
    text-align:center; 
    width:150px; height:90px; 
} 
#caption-area { width:150px; height:27px; overflow-y:hidden; } 
#caption-area h1 { font:bold 18px/1.5 Helvetica,Arial,sans-serif; } 

(partie importante est mise #caption-areaheight et overflow-y:hidden)

jQu rès

$(function(){ 

var $ca = $('#caption-area'); // cache dynamic section 

var cahOrig = $ca.height(); 
// store full height and return to hidden size 
$ca.css('height','auto'); 
var cahAuto = $ca.height(); 
$ca.css('height',cahOrig+'px'); 

// hover functions 
$('#container').bind('mouseenter', function(e) { 
    $ca.animate({'height':cahAuto+'px'},600); 
}); 
$('#container').bind('mouseleave', function(e) { 
    $ca.animate({'height':cahOrig+'px'},600); 
});​ 

}); 

En outre, vous devriez la portée de ces variables si vous implémentez cela pour vrai.

---

EDIT: Adaptée au-dessus de travailler pour multiple hovers on a page, check it out.

C'est un peu plus compliqué, mais j'espère que vous pouvez le comprendre sans explication détaillée.

Answer 2

Très bel exemple, upvoted. Je ne fais que mettre ici parce que cela semblait un peu trop pour un commentaire.

Vous voudrez peut-être envisager jQuery.stop() afin de prévenir les animations d'emballement. Pour voir ce que je veux dire courir le pointeur de la souris de haut en bas de la colonne de wrappers quelques fois à un rythme rapide.

La révision suivante de votre exemple JavaScript a fonctionné correctement pour moi dans FireFox 3.6. La disposition exacte de la page déterminera à quel point vous devez être agressif sur les performances du sélecteur/animation lors de la fermeture des zones de légende.

var cahOrig = $('.caption-area').height(); 

// So the class selector doesn't need to be run over and over 
var jqCaptionAreas = $('.wrapper .caption-area'); 

$('.wrapper').each(function(i,obj){ 
    $(obj).css('z-index',9999-i); 
}); 

$('.wrapper').bind('mouseenter', function(e) { 

    // put the brakes on run-aways and close them back up 
    jqCaptionAreas 
     .stop(true) 
     .animate({'height':cahOrig+'px'},400); 

    var $ca = $(this).find('.caption-area'); 

    $ca.css('height','auto'); 
    var cahAuto = $ca.height(); 
    $ca.css('height',cahOrig+'px'); 

    $ca.animate({'height':cahAuto+'px'},400); 

}); 

$('.wrapper').bind('mouseleave', function(e) { 
    $(this).find('.caption-area').animate({'height':cahOrig+'px'},400); 
});