jQuery परिवर्तित प्रोटोटाइप करने के लिए: गतिशील रूप SlideUp माउसओवर पर div

वोट
0

मैं गतिशील अपने wraper div से अधिक एक div स्लाइड को यह jQuery कोड का उपयोग करें:

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

एचटीएमएल इस तरह है:

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

मास्क div (सीएसएस: ऊंचाई: 0; प्रदर्शन: कोई नहीं; स्थिति: पूर्ण;) अंगूठे wraper div के अंदर ऊपर स्लाइड (: स्थिति: सीएसएस रिश्तेदार;)।

मैं एक ही पृष्ठ में अंगूठे divs का एक बहुत है, thats कारण है कि मैं यह गतिशील रूप से किया जा करने के लिए इतना ही मास्क है कि विशिष्ट अंगूठे अंदर div अप slided है (और नीचे slided जब माउस खत्म नहीं हुआ है) की जरूरत है ।

मैं इस विशेष परियोजना के लिए प्रोटोटाइप / Scriptaculous के लिए jQuery से स्थानांतरित कर दिया (क्यों :-D मत पूछो) और मैं प्रोटोटाइप / Scriptaculous लिए इस कोड को बदलने की आवश्यकता ..

क्या कोई व्यक्ति कृपा करके मेरी सहायता करेगा?

नोट: यह वास्तव में jQuery कोड मैं सिर्फ एक ही व्यवहार शैली की जरूरत के बराबर होने की जरूरत नहीं है।

26/05/2009 को 10:13
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
1

आप कहीं प्रभाव धारण करने के लिए है: मुख्य समस्या यह है कि scriptaculous () बंद नहीं होता है।

हो सकता है कि यह होगा

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

मैं अभी भी यकीन है कि अगर यह वास्तव में सही है या सुरुचिपूर्ण है नहीं कर रहा हूँ!

26/05/2009 को 11:26
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more