JQuery to Prototype conversion: moving divUpDuD dynamically on mouse
I am using this jQuery code to dynamically unfold a div over its speaker 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 looks like this:
<div class="thumb">
<a href="something.html"><img src="something.jpg" /></a>
<div class="masque">
<h3>Something</h3>
<p> Something e</p>
</div>
</div>
The "masque" div (CSS: height: 0; display: none; position: absolute;) slides inside the wraper div's thumb (CSS: position: relative;).
I have a lot of "big" sections on the same page, so I need this to be done dynamically, so only the "mask" inside this particular "thumb" is overlaid (and pushed down when the mouse is no more).
I switched from jQuery to Prototype / Scriptaculous for this particular project (don't ask why: -D) and I need to convert this code to Prototype / Scriptaculous ..
Can anyone help me?
Note. It doesn't have to be exactly equal to jQuery code. I just need the same style of behavior.
a source to share
The main problem is that scriptaculous has no stop (): you have to hold the effect somewhere.
Perhaps it will
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();
I'm still not sure if this is really correct or elegant!
a source to share