jQuery की स्लाइड बायीं और दिखाई देती है

Question

मैंने jQueryकॉल किए गए प्रभावों को slideRightShow()और slideLeftHide()एक दो कार्यों के साथ बढ़ाया जो नीचे slideUp()और slideDown()जैसा देखा गया है, उसी तरह काम करते हैं। हालाँकि, मैं भी लागू करना चाहूंगा slideLeftShow()और slideRightHide()।

मुझे पता है कि इस तरह की चीज़ों की पेशकश करने वाले पर्याप्त पुस्तकालय हैं (मैं javascriptफ़ाइलों के एक और बड़े सेट को जोड़ने से बचना चाहूंगा ), लेकिन क्या कोई भी एक सरल उदाहरण प्रदान कर सकता है कि slideLeftShow()या तो कैसे लागू किया जाए slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

उपरोक्त slideRightShowफ़ंक्शन बाईं ओर से छवि दिखाना शुरू करता है और यह दाईं ओर बढ़ता है। मैं एक ही काम करने के लिए किसी तरह की तलाश कर रहा हूं, लेकिन दाईं ओर से शुरू करें और बाईं ओर प्रगति करें । धन्यवाद!

संपादित करें

jQuery इंटरफ़ेस में कुछ ऐसा है जिसकी मुझे आवश्यकता है (मुझे मूल रूप से "सही में स्लाइड" और "स्लाइड आउट लेफ्ट" फ़ंक्शंस की आवश्यकता है), लेकिन मुझे jQuery 1.3 के साथ काम करने के लिए यह नहीं मिल सका: http://interface.eyecon.ro/demos /ifx.html । इसके अलावा, उनका डेमो टूट गया है और साथ ही यह केवल एक बार एक लाख त्रुटियों को फेंकने से पहले स्लाइड करेगा।

Comments

मैंने अपनी पोस्ट को अपडेट किया मुझे आशा है कि यह मदद करता है

— bendewey

संबंधित: stackoverflow.com/questions/596608/slide-right-to-left

— टिमो हुओविनन

Answer 1

यह सुविधा jquery ui http://docs.jquery.com/UI/Effects/Slide के भाग के रूप में शामिल है यदि आप इसे अपने स्वयं के नामों के साथ विस्तारित करना चाहते हैं तो आप इसका उपयोग कर सकते हैं।

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

आपको निम्नलिखित संदर्भों की आवश्यकता होगी

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

Comments

नमस्ते! मैं आपके द्वारा लागू किए गए कार्यों के विलोम की तलाश कर रहा हूं। मूल रूप से, जब मैं एक तत्व को दिखाने के लिए मेरे पास जो है उसका उपयोग करता है, तो बाएं भाग पहले प्रकट होता है और दाईं ओर बढ़ता है। मैं इसे दाईं ओर से शुरू करने और बाईं ओर प्रगति करने की कोशिश कर रहा हूं।

— विकेटकीपॉक

यह काम करता है यदि आप तत्व को सही तरीके से फ्लोट करते हैं। अन्यथा। हो सकता है कि आप बाईं संपत्ति को अन्न देना चाहते हैं और तत्व को स्थानांतरित कर सकते हैं।

— bendewey

"सही" फ्लोट करने के लिए तत्व को बदलना मेरे लिए स्लाइड को उल्टा नहीं करता था। अगर यह मदद करता है तो मैंने ऊपर स्पष्ट किया।

— विकेटकीपॉक

आपको बहुत - बहुत धन्यवाद! मुझे नहीं पता था कि यह jQuery के प्रभावों का हिस्सा था। अगर मैं कर सकता तो मैं +2 देता!

— विकेटकीपोक

दो ui लिपियों के स्रोत के लिंक अब हैं: jquery-ui.googlecode.com/svn/tags/latest/ui/… और " jquery-ui.googlecode.com/svn/tags/latest/ui/-

— Muleskinner

Answer 2

पैडिंग और मार्जिन को न भूलें ...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

जोड़ा गया गति / कॉलबैक तर्कों के साथ, यह एक पूर्ण ड्रॉप-इन प्रतिस्थापन है slideUp()और slideDown()।

Comments

उन्हें सही स्लाइडिंग के साथ समान प्रभाव बनाने के लिए कैसे बनाया जा सकता है?

— जयंत वार्ष्णेय

@ जयंत वार्ष्णेय: सुनिश्चित करें कि ब्लॉक सही-संरेखित है, संभवतः कुछ आंतरिक ब्लॉक के साथ। यह कोड केवल चौड़ाई को सिकोड़ता है। यदि आपका सीएसएस इसे संभाल सकता है, तो आपके पास एक सही स्लाइड होगी

— vdboor

धन्यवाद ... लेकिन मैं एक ही div पर दोनों प्रभाव चाहता हूं .. जैसे दाएं से बाएं खोलना और फिर बाएं से दाएं या इसके विपरीत बंद होना ...

— Jayant Varshney

तो फिर, कॉलबैक पूरा होने पर कक्षाएं कैसे बदलें? :-)

— vdboor

धन्यवाद, मैंने इस कार्यक्षमता को प्राप्त करने के लिए CSS3 एनिमेशन का उपयोग किया

— जयंत वार्ष्णेय

Answer 3

आप अपने स्वयं के स्क्रिप्ट फ़ाइल पर इन लाइन को जोड़कर अपने jQuery पुस्तकालय में नए फ़ंक्शन जोड़ सकते हैं और आप आसानी से उपयोग कर सकते हैं fadeSlideRight()और fadeSlideLeft()।

नोट: आप 750px के उदाहरण को पसंद करते हुए एनीमेशन की चौड़ाई बदल सकते हैं।

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}

Comments

यह ठीक वैसा ही है जैसा मुझे jQuery UI को शामिल किए बिना आवश्यक था। बस मापदंडों के रूप में अस्पष्टता और चौड़ाई को जोड़ा। ... = function(opacity, speed, width, fn) {...}

— डायलन वालडे

यह अब तक का सबसे अच्छा समाधान है। अधिक पुस्तकालयों को जोड़ने की आवश्यकता नहीं है। धन्यवाद।

— होज़ियो

Answer 4

और यदि आप गति को अलग करना चाहते हैं और कॉलबैक को शामिल करते हैं तो बस उन्हें इस तरह जोड़ें:

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });