jQuery Vurgulu metni kaydırın mı?

Question

Bu çevrimiçi bir şeye benzer bir şey gördüğümü biliyorum, ancak iyi bir örneğim yok. Tasarım yapabileceğim yapı seti ile bir çeşit eklenti olabileceğini umuyordum. http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

Herhangi fikirler:

böyle bir şey başarmak için mi arıyorsunuz?

Answer 1

(Not: daha sağlam bir çözüm için altta Düzenlenen örneğe bakın) jQuery

Bir nokta mümkün kolayca dinamik davranışının sadece bu tür başarmak olmaktır, bu yüzden özel bir eklenti gerekir sanmıyorum. 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; } 

(Önemli bölümü #caption-areaheight ve overflow-y:hidden ayarlıyor)

jQu eri Ayrıca

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

}); 

yapmanız gerekir kapsamı Sen gerçek bu uygulamaya olsaydı bu değişkenler.

---

DÜZENLEME:multiple hovers on a page, check it out için çalışmak yukarıda Uyarlanmış.

Biraz daha karmaşık ama umarım genişletilmiş bir açıklama yapmadan bunu anlayabilirsiniz.

Answer 2

Çok güzel örnek, aşağıdakine. Bunu sadece buraya koyuyorum çünkü bir yorum için biraz fazla gibi görünüyordu.

Kaçak animasyonlardan kaçınmak için jQuery.stop() öğesini düşünmek isteyebilirsiniz. Ne demek istediğimi görmek için fare işaretçinizi sarmalayıcıların kolonunu aşağı yukarı birkaç kez çalıştırın.

Örnek JavaScript'in aşağıdaki revizyonu, FireFox 3.6'da benim için tamam çalıştı. Tam sayfa düzeni, altyazı alanlarını kapatırken seçici/animasyon performansı hakkında ne kadar agresif olmanız gerektiğini belirler.

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