jQuery Prototyp konvertieren: Dynamisch SlideUp div mit der Maus darüber

Question

Ich benutze diesen Code jQuery ein div über seine wraper zu gleiten div dynamisch:

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

Die HTML ist wie folgt:

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

Die "masque" div (CSS: height: 0; Anzeige: none; position: absolute;) gleitet nach oben in das "thumb" -Wrapper div (CSS: position: relative;).

Ich habe viele "Daumen" divs auf der gleichen Seite, deshalb muss ich es dynamisch machen, so dass nur das "masque" div innerhalb dieses speziellen "Daumens" hochgleitet (und nach unten rutscht, wenn die Maus gedrückt wird) ist nicht vorbei).

Ich habe von jQuery Prototype/Scriptaculous für dieses spezielle Projekt verschoben (fragen Sie nicht, warum :-D) und ich diesen Code zu Prototype/Scriptaculous zu konvertieren ..

Kann jemand bitte helfen Sie mir ?

Hinweis: Es muss nicht genau dem jQuery-Code entsprechen Ich brauche nur den gleichen Verhaltensstil.

Answer 1

Das Hauptproblem ist, dass Scriptaculous nicht stoppen(): Sie müssen den Effekt irgendwo halten.

Vielleicht wäre es

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

sein Ich bin immer noch nicht sicher, ob es eigentlich richtig oder elegant ist!