jQuery Plugin zum Verschieben von Text bei Hover?

Question

Ich weiß, ich habe etwas ähnliches online gesehen, aber ich habe kein gutes Beispiel. Ich hatte gehofft, dass es ein Plug-In mit dem Struktur-Set geben könnte, das ich entwerfen könnte.

der Suche, etwas zu erreichen: http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

Irgendwelche Ideen?

Answer 1

(Hinweis: Siehe editierten Beispiel unten für robustere Lösung)

Ein Punkt von jQuery ist in der Lage einfach nur diese Art von dynamischem Verhalten zu erreichen sein, so dass ich glaube nicht, dass Sie ein spezielles Plugin benötigen. 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; } 

(Wesentlicher Teil setzt #caption-areaheight und 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); 
});​ 

}); 

Auch Sie sollten Umfang diese Variablen, wenn Sie dies für echte umsetzten.

---

EDIT: die oben Angepasst für multiple hovers on a page, check it out zu arbeiten.

Es ist ein bisschen komplizierter, aber hoffentlich können Sie es ohne eine erweiterte Erklärung herausfinden.

Answer 2

Sehr schönes Beispiel, upvoted. Ich setze das hier nur auf, weil es für ein Kommentar ein bisschen viel zu sein schien.

Sie können jQuery.stop() in Betracht ziehen, um Runaway-Animationen zu verhindern. Um zu sehen, was ich meine, führen Sie Ihren Mauszeiger ein paar Mal mit hoher Geschwindigkeit die Spalte der Wrapper auf und ab.

Die folgende Überarbeitung Ihres Beispiel-JavaScript funktionierte für mich in FireFox 3.6. Das genaue Seitenlayout bestimmt, wie aggressiv Sie beim Schließen der Beschriftungsbereiche über die Selektor-/Animationsleistung sein müssen.

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