jQuery來原型轉換：動態效果基本show格鼠標懸停

Question

我用這個jQuery代碼向上滑動在其wraper格設置動態股利：

jQuery.fn.masque = function(classSelector) { 
    $(this).hover(function(){ 
     $(this).find(classSelector).stop().animate({height:'88px',opacity: '0.8'},400); 
    },function() { 
     $(this).find(classSelector).stop().animate({height:'0',opacity: '0'}, 300); 
    }); 
}; 

$(document).ready(function(){$('.thumb').masque('.masque');}); 

的HTML是這樣的：

<div class="thumb"> 
    <a href="something.html"><img src="something.jpg" /></a> 
    <div class="masque"> 
    <h3>Something</h3> 
    <p> Something e</p> 
    </div> 
</div> 

的「masque」div（CSS：height：0; display：none; position：absolute;）在「thumb」包裝div（CSS：position：relative;）中滑動。

我在同一個頁面中有很多「拇指」div，這就是爲什麼我需要動態地做這個動作，所以只有特定「拇指」內的「面具」div滑落（當滑鼠下滑時沒有結束）。

我從jQuery的轉移到原型/ Scriptaculous的這個特定的項目（不要問爲什麼:-D），我需要這個代碼轉換爲原型/ Scriptaculous的..

是否有人可以幫助我？

注意：它不需要完全等於我只需要相同的行爲風格的jQuery代碼。

Answer 1

主要的問題是，scriptaculous沒有stop（）：你必須在某個地方保持效果。

也許這將是

Element.addMethods({ 
    masque: function(selector) { 
     this.observe('mouseover', function() { 
      if(this._masqueEffect !== undefined) { 
       this._masqueEffect.cancel(); 
      } 
      this._masqueEffect = this.down(selector).morph({ 
        style: {height:'88px',opacity: '0.8'}, 
        duration: 400}); 
     }); 
     this.observe('mouseout', function() { 
      if(this._masqueEffect !== undefined) { 
       this._masqueEffect.cancel(); 
      } 
      this._masqueEffect = this.down(selector).morph({ 
        style: {height:'0px',opacity: '0'}, 
        duration: 300}); 
     }); 
    } 
}); 

(function(){ $$('.thumb').invoke('masque', '.masque'); }).defer(); 

我仍然不知道，如果是實際上是正確的或優雅！