I use this jQuery code to slide up a div over its wraper div dynamically:
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');});
The HTML is 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 up inside the "thumb" wraper div (CSS: position: relative;).
I have a lot of "thumb" divs in the same page, thats why I need it to be done dynamically so only the "masque" div inside that specific "thumb" is slided up (and slided down when the mouse is not over).
I have moved from jQuery to Prototype/Scriptaculous for this specific project and I need to convert this code to Prototype/Scriptaculous.
Note: It doesn't need to be exactly equal to the jQuery code I just need the same behaviour style.
The main problem is that scriptaculous doesn't have stop(): you have to hold the effect somewhere.
Maybe it would be
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 it's actually correct or elegant!