javascript - tutorial - w3schools




jQuery स्लाइडअप को दिखाने के लिए तत्व और छिपाने के लिए नहीं (6)

जो लोग Jquery UI का उपयोग नहीं करते हैं, लेकिन वे फ़ंक्शन को Jquery लाइब्रेरी में जोड़ना चाहते हैं:

jQuery.fn.slideUpShow = function (time,callback) {
    if (!time)
        time = 200;
    var o = $(this[0]) // It's your element

    if (o.is(':hidden'))
    {
        var height = o.css({
            display: "block"
        }).height();

        o.css({
            overflow: "hidden",
            marginTop: height,
            height: 0
        }).animate({
            marginTop: 0,
            height: height
        }, time, function () {
            $(this).css({
                display: "",
                overflow: "",
                height: "",
                marginTop: ""
            });
            if (callback)
                callback();
        });
    }

    return this; // This is needed so others can keep chaining off of this
};

jQuery.fn.slideDownHide = function (time,callback) {
    if (!time)
        time = 200;
    var o = $(this[0]) // It's your element
    if (o.is(':visible')) {
        var height = o.height();

        o.css({
            overflow: "hidden",
            marginTop: 0,
            height: height
        }).animate({
            marginTop: height,
            height: 0
        }, time, function () {
            $(this).css({
                display: "none",
                overflow: "",
                height: "",
                marginTop: ""
            });
            if (callback)
                callback();
        });
    }

    return this;
}

क्रेडिट: @redbmk जवाब

jQuery का स्लाइडअप प्रभाव तत्व को ऊपर खिसका कर छुपाता है, जबकि स्लाइडडाउन तत्व को दर्शाता है। मैं अपने div को SlideUp का उपयोग करके दिखाना चाहता हूं। क्या कोई मेरा मार्गदर्शन कर सकता है? धन्यवाद


नाम के बावजूद, स्लाइडडाउन वास्तव में आपके तत्व को दोनों तरीकों से स्लाइड कर सकता है। मूल तत्व के अंदर चेतन करने के लिए आवश्यक स्थिति का उपयोग करें:

#slideup {
  position:fixed;
  bottom:0;
  background:#0243c9;
  color:#fafefa;
  width:100%;
  display:none;
  padding: 20px;
}
#littleslideup {
  position:absolute;
  bottom:0;
  background:#000;
  color:#fff;
  display:none;
  padding:10px;
  z-index:100;
}
#slidedown {
  position:fixed;
  top:0;
  background:#c94333;
  color:#fafefa;
  width:100%;
  display:none;
  padding: 20px;
}
button {
  display:inline-block;
  font-size:16px;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="position:relative">This amounts to 70% of the total timber stand area of the region (not including the dwarf pine and shrubby alder) and is more than the total area of all other stone birch forests growing in the Magadan, Khabarovsk, Primorye and Sakhalin regions and other areas of its distribution.
  <div id="littleslideup">Absolute-positioned element</div>
</div>

<span style="color:red">Click >> </span>

<button onclick="jQuery('#slideup').slideDown(1500);"      >"Slideup"</button>
<button onclick="jQuery('#slidedown').slideDown(1500);"    >"Slidedown"</button>
<button onclick="jQuery('#littleslideup').slideDown(1500);">"Slideup" inside element</button>

<div>Finally, closing the subject of volcanic activity, it must be said that the stone birch stands by its functional reaction quite adequately in order to re ect the character and intensity of the physical, chemical and thermic processes, stipulated by volcanism as well as the in uence upon biota and ecosystems.</div> 

<div id="slideup">Could be a bottom cookie warning bar</div>

<div id="slidedown">Could be a top cookie warning bar</div>


यह केवल slideUpShow() या कुछ और कहने की तुलना में थोड़ा अधिक जटिल है, लेकिन आप अभी भी कर सकते हैं। यह एक बहुत ही सरल उदाहरण है, इसलिए आपको कुछ किनारे-मामले मिल सकते हैं जिनकी आवश्यकता है।

$("#show-animate-up").on("click", function () {
    var div = $("div:not(:visible)");

    var height = div.css({
        display: "block"
    }).height();

    div.css({
        overflow: "hidden",
        marginTop: height,
        height: 0
    }).animate({
        marginTop: 0,
        height: height
    }, 500, function () {
        $(this).css({
            display: "",
            overflow: "",
            height: "",
            marginTop: ""
        });
    });
});

यहाँ एक slideUp जो slideUp / slideUp विधियाँ दिखा रहा है, animate का उपयोग करके समान प्रभाव, और animate का उपयोग करके एक संशोधित संस्करण जो रिवर्स में जाता है: http://jsfiddle.net/sd7zsyhe/1/

चूंकि animate एक अंतर्निहित jQuery फ़ंक्शन है, इसलिए आपको jQuery UI शामिल करने की आवश्यकता नहीं है।


स्लाइडअप और स्लाइडडाउन के विपरीत पाने के लिए। इन दोनों कार्यों को jQuery में जोड़ें।

$.fn.riseUp = function()   { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }

मुझे कुछ डाउनवोट मिले हैं इसलिए मैंने अपना उत्तर दिया और वास्तव में मैंने ओपी प्रश्न का सही उत्तर नहीं दिया, क्षमा करें। तो मैं इसे ठीक करने की कोशिश करने वाला हूं।

सबसे पहले, JQuery में slideUp() विधि का उद्देश्य तत्व को प्रकट करने के बजाय छिपाना है। यह मूल रूप से slideDown() के विपरीत है जो आपके तत्व को नीचे slideDown() दिखाता है।

यह जानकर कि मुझे लगता है कि हम इस बात से सहमत हैं कि किसी तत्व (JQuery में) को दिखाने के लिए स्लाइड अप प्रभाव करने के लिए कोई जादू कार्य नहीं है।

इसलिए हमें थोड़ा सा काम करने की जरूरत है कि हमें क्या चाहिए: प्रभाव को प्रकट करना। मुझे कुछ समाधान मिले और यहाँ एक है जिसे मैं लागू करना आसान समझता हूं:

https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal

ऊपर दिए गए समाधान होवर ईवेंट के साथ काम करता है, क्लिक इवेंट के लिए इस संशोधित कोड को आज़माएं:

http://jsfiddle.net/D7uT9/250/

@redbmk द्वारा दिया गया उत्तर भी एक कार्यशील समाधान है।

पहली बार मेरी गलतफहमी के लिए क्षमा करें।

पुराने ANSWER

यह एक पुरानी पोस्ट है, लेकिन अगर कोई यहाँ समाधान की तलाश कर रहा है तो मेरी सिफारिश है।

हम, इस प्रभाव को प्राप्त करने के लिए (jQuery UI की आवश्यकता के बिना slideToggle() का उपयोग कर सकते हैं।

$(".btn").click(function () {
      $("div").slideToggle();
});

दस्तावेज़ीकरण: http://api.jquery.com/slidetoggle/






jquery