Question

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 (don’t ask why 😀 ) and I need to convert this code to Prototype/Scriptaculous..

Can someone please help me out?

Note: It doesn’t need to be exactly equal to the jQuery code I just need the same behaviour style.

Answer 1

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!