jQuery Plugin per scorrere il testo al passaggio del mouse?

Question

So di aver visto qualcosa di simile a questo in linea ma non ho un buon esempio. Speravo che potesse esserci una sorta di plug-in con il set di strutture che potevo progettare in giro.

Cercando di realizzare qualcosa di simile: http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

Tutte le idee?

Answer 1

(Nota: Vedi esempio modificata il fondo per la soluzione più robusta)

Un punto di jQuery è quello di poter realizzare proprio questo tipo di comportamento dinamico facilmente, quindi non credo che avete bisogno di un plugin speciale. 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; } 

(Parte importante è la creazione #caption-areaheight e overflow-y:hidden)

jQu ery

$(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); 
});​ 

}); 

Inoltre, si dovrebbe portata tali variabili se si stesse applicazione del presente per davvero.

---

EDIT: Adattato quanto sopra a lavorare per multiple hovers on a page, check it out.

È un po 'più complicato, ma si spera che lo si possa capire senza una spiegazione estesa.

Answer 2

Esempio molto bello, con aumento di frequenza. Sto solo mettendo questo qui perché sembrava un po 'troppo per un commento.

È possibile considerare jQuery.stop() per impedire animazioni fuori controllo. Per vedere cosa intendo metto il puntatore del mouse su e giù per la colonna di wrapper un paio di volte a un ritmo veloce.

La seguente revisione del tuo codice JavaScript di esempio ha funzionato bene per me in FireFox 3.6. Il layout esatto della pagina determinerà quanto deve essere aggressivo il selettore/le prestazioni dell'animazione quando si chiudono le aree didascalia.

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); 
});