javascriptjqueryprototypejsscriptaculous

jQuery to Prototype convert: Dynamically SlideUp div on mouseover


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.


Solution

  • 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!