CSS3 के बराबर jQuery के स्लाइडअप और स्लाइडडाउन?

89

मेरा आवेदन jQuery के स्लाइडडाउन और स्लाइडअप के साथ खराब प्रदर्शन कर रहा है। मैं ब्राउज़रों में CSS3 के समतुल्य का उपयोग करना चाह रहा हूं जो इसका समर्थन करते हैं।

यह CSS3 के संक्रमण का उपयोग कर, से एक तत्व को बदलने के लिए संभव है, display: none;के लिए display: block;है, जबकि ऊपर या नीचे आइटम रपट?

jquery  css  animation 
— माइक
स्रोत
मुझे लगता है कि आप प्रदर्शन को बनाए रखेंगे: ब्लॉक करें, लेकिन बस वांछित राशि से चौड़ाई को समायोजित करें 0.
— डनहमजज़

जवाबों:

37

आप ऐसा कुछ कर सकते हैं:

#youritem .fade.in {
    animation-name: fadeIn;
}

#youritem .fade.out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        transform: translateY(endYposition);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        transform: translateY(endYposition);
    }
}

उदाहरण - स्लाइड और फीका:

यह स्लाइड और अस्पष्टता को दर्शाता है - कंटेनर की ऊंचाई के आधार पर नहीं, बल्कि शीर्ष / समन्वय पर। उदाहरण देखें

उदाहरण - ऑटो-ऊंचाई / कोई जावास्क्रिप्ट: यहां एक जीवित नमूना है, ऊंचाई की आवश्यकता नहीं है - स्वचालित ऊंचाई और कोई जावास्क्रिप्ट के साथ काम करना।
उदाहरण देखें

— टीएनसी
स्रोत
क्या आप jsFiddle पर एक डेमो बना सकते हैं?
— 53इमे विदा
@ Sayime मेरी पहली नज़र से, मैं कहूंगा कि आप अपना एलिमेंट क्लास = "फेड" दें और जब आप एक फेड को चाहें, तब क्लास में ऐड करें, जब आप एक फीका आउट चाहेंगे।
— larearez
@ Useime - मैंने आपके लिए दो नमूने शामिल किए हैं
— TNC
Vsync - नीचे देखें और इस तरह की टिप्पणियों को पोस्ट करने से पहले धागे का पालन करें
— TNC
3
मैंने दूसरा उदाहरण (ऑटो-ऊंचाई / कोई जावास्क्रिप्ट) संशोधित किया ताकि प्रभाव प्राप्त करने के लिए केवल नंगे पत्थर की शैलियों को जगह मिले। jsfiddle.net/OlsonDev/nB5Du/251
— Olson.dev
15

मैंने आपका समाधान बदल दिया, ताकि यह सभी आधुनिक ब्राउज़रों में काम करे:

सीएसएस स्निपेट:

-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;

जेएस स्निपेट:

    var clone = $('#this').clone()
                .css({'position':'absolute','visibility':'hidden','height':'auto'})
                .addClass('slideClone')
                .appendTo('body');

    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    $('#this').css('height',newHeight + 'px');

यहाँ एक पूर्ण उदाहरण http://jsfiddle.net/RHPQd/ है

— JensT
स्रोत
यह सुनिश्चित नहीं है कि -27 साल बाद यह कौन है , फिर भी एक आकर्षण की तरह काम करता है। सिवाय इसके कि मैं वैनिला जेएस के साथ इसे फिर से बनाता हूं। +1 मुझ से।
— हाफिज तेमुरी
9

तो मैं आगे गया और अपने सवाल का जवाब दिया :)

@ सच का जवाब एक तत्व को एक विशिष्ट ऊँचाई में बदलना माना जाता है। इसके साथ समस्या यह है कि मुझे तत्व की ऊंचाई का पता नहीं है (यह उतार-चढ़ाव कर सकता है)।

मुझे अन्य समाधान मिले जिनके चारों ओर संक्रमण के रूप में अधिकतम ऊंचाई का उपयोग किया गया था लेकिन इसने मेरे लिए एक बहुत ही झटकेदार एनीमेशन का उत्पादन किया।

नीचे दिया गया मेरा समाधान केवल WebKit ब्राउज़रों में काम करता है।

यद्यपि विशुद्ध रूप से CSS नहीं है, लेकिन इसमें ऊंचाई को परिवर्तित करना शामिल है, जो कुछ JS द्वारा निर्धारित किया जाता है।

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});
#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>
स्निपेट का विस्तार करें

JSFiddle पर देखें

— माइक
स्रोत
हाँ, नीचे दिए गए मेरे कोड को ऊंचाई की आवश्यकता नहीं है क्योंकि यह y-निर्देशांक का उपयोग करता है। लेकिन आपने उल्लेख नहीं किया कि आपको ऊंचाई पर निर्भरता के साथ कुछ की आवश्यकता थी :) आप हमेशा एक मार्जिन संक्रमण आदि कर सकते थे, लेकिन ऐसा लगता है कि आपके पास वह है जो आप खोज रहे हैं, नहीं?
— टीएनसी
@ क्या आपको लगता है कि आप बता सकते हैं कि मार्जिन ट्रांजिशन से आपका क्या मतलब है?
— माइक
स्थिति के लिए जोड़ा गया नमूना, मार्जिन को जोड़ देगा
— TNC
इसके अलावा मार्जिन / नो javsacript उदाहरण
— TNC
8

क्यों नहीं आधुनिक ब्राउज़रों सीएसएस संक्रमण का लाभ लेने के लिए और अधिक सीएसएस और कम jquery का उपयोग करके चीजों को सरल और तेज बनाते हैं

यहाँ ऊपर और नीचे स्लाइड करने के लिए कोड है

यहाँ बाएँ से दाएँ फिसलने का कोड है

इसी तरह हम ट्रांसफॉर्मिंग-ओरिजनल और ट्रांसफॉर्मेशन: स्केलएक्स (0) या ट्रांसफॉर्मेशन: स्केल (0) को उचित रूप से बदलते हुए स्लाइडिंग को ऊपर से नीचे या दाएं से बाएं में बदल सकते हैं।

— मानस
स्रोत
1
मुझे पता है कि यह उत्तर 2014 में रखा गया था, लेकिन मैं इस उत्तर का उपयोग करने की अनुशंसा नहीं कर सकता, यदि आप इसके नीचे या ऊपर के तत्वों को धक्का देना चाहते हैं क्योंकि मूल कंटेनर ब्राउज़र में ऊँचाई को बढ़ा देगा
— एलिसन
6

काम करने के लिए ऊंचाई में बदलाव करना थोड़ा मुश्किल हो सकता है क्योंकि आपको इसके लिए ऊंचाई को जानना होगा। यह एनिमेटेड होने के लिए तत्व में पैडिंग द्वारा आगे जटिल है।

यहां वह है जो मैंने जुटाया:

इस तरह से एक शैली का उपयोग करें:

    .slideup, .slidedown {
        max-height: 0;            
        overflow-y: hidden;
        -webkit-transition: max-height 0.8s ease-in-out;
        -moz-transition: max-height 0.8s ease-in-out;
        -o-transition: max-height 0.8s ease-in-out;
        transition: max-height 0.8s ease-in-out;
    }
    .slidedown {            
        max-height: 60px ;  // fixed width                  
    }

अपनी सामग्री को दूसरे कंटेनर में लपेटें, ताकि आपके द्वारा फिसल रहे कंटेनर में कोई पैडिंग / मार्जिन / सीमा न हो:

  <div id="Slider" class="slideup">
    <!-- content has to be wrapped so that the padding and
            margins don't effect the transition's height -->
    <div id="Actual">
            Hello World Text
        </div>
  </div>

फिर सीएसएस कक्षाओं को ट्रिगर करने के लिए कुछ स्क्रिप्ट (या बाध्यकारी फ्रेमवर्क में घोषणात्मक मार्कअप) का उपयोग करें।

  $("#Trigger").click(function () {
    $("#Slider").toggleClass("slidedown slideup");
  });

यहाँ उदाहरण: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p ।preview

यह निश्चित आकार की सामग्री के लिए ठीक काम करता है। अधिक सामान्य सॉलिट्यूड के लिए आप संक्रमण सक्रिय होने पर तत्व के आकार का पता लगाने के लिए कोड का उपयोग कर सकते हैं। निम्नलिखित एक jQuery प्लग-इन है कि बस करता है:

$.fn.slideUpTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css("max-height", "0");
        $el.addClass("height-transition-hidden");
    });
};

$.fn.slideDownTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.removeClass("height-transition-hidden");

        // temporarily make visible to get the size
        $el.css("max-height", "none");
        var height = $el.outerHeight();

        // reset to 0 then animate with small delay
        $el.css("max-height", "0");

        setTimeout(function() {
            $el.css({
                "max-height": height
            });
        }, 1);
    });
};

जिसे इस तरह ट्रिगर किया जा सकता है:

$ ("# ट्रिगर")। क्लिक करें (फ़ंक्शन () {

    if ($("#SlideWrapper").hasClass("height-transition-hidden"))
        $("#SlideWrapper").slideDownTransition();
    else
        $("#SlideWrapper").slideUpTransition();
});

इस तरह मार्कअप के खिलाफ:

<style>
#Actual {
    background: silver;
    color: White;
    padding: 20px;
}

.height-transition {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;            
}
.height-transition-hidden {            
    max-height: 0;            
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
    <!-- content has to be wrapped so that the padding and
        margins don't effect the transition's height -->
    <div id="Actual">
     Your actual content to slide down goes here.
    </div>
</div>

उदाहरण: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?==view

मैंने इसे हाल ही में एक ब्लॉग पोस्ट में लिखा है यदि आप अधिक विस्तार से रुचि रखते हैं:

http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown

— रिक स्ट्राल
स्रोत
यह मेरे लिए सबसे सुरुचिपूर्ण समाधान है। और जरूरत पड़ने पर jQuery को आसानी से हटाया जा सकता है। document.getElementById("Slider").classList.toggle("slidedown");
— वेनिला
5

मैं jQuery ट्रांज़िट प्लगइन का उपयोग करने की सलाह दूंगा, जो CSS3 ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग करता है, जो इस तथ्य के कारण मोबाइल उपकरणों पर बहुत अच्छा काम करता है कि उस देशी रूप और अनुभव को देने के लिए हार्डवेयर त्वरण का समर्थन करता है।

जेएस फिडेल उदाहरण

HTML:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

जावास्क्रिप्ट:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});
— ROFLwTIME
स्रोत
क्या यह आपको ऑटो का उपयोग करके किसी तत्व की प्राकृतिक ऊंचाई पर संक्रमण करने में सक्षम बनाता है? जैसे। $ ("। मूव")। संक्रमण ({ऊंचाई: 'ऑटो'})
— मंकीबॉय
2
काश वे इस प्लगइन के साथ slideUp()और slideDown()तरीकों को ओवरराइड करते । यही कारण है कि वास्तव में अच्छा होगा
— स्टीव
यह कमाल है BTW। इस उत्तर को जोड़ने के लिए धन्यवाद!
— चरण
2

कुछ शोध और प्रयोग करने के बाद, मुझे लगता है कि सबसे अच्छा तरीका यह है कि सबसे अच्छी बात यह है कि इस चीज़ की ऊँचाई कम होनी 0pxचाहिए, और इसे एक सटीक ऊँचाई पर संक्रमण करने देना चाहिए। आपको जावास्क्रिप्ट के साथ सटीक ऊंचाई मिलती है। जावास्क्रिप्ट ऐनिमेशन नहीं कर रहा है, यह सिर्फ ऊंचाई मान बदल रहा है। इसे जाँचे:

function setInfoHeight() {
  $(window).on('load resize', function() {
    $('.info').each(function () {
      var current = $(this);
      var closed = $(this).height() == 0;
      current.show().height('auto').attr('h', current.height() );
      current.height(closed ? '0' : current.height());
    });
  });

जब भी पृष्ठ लोड होता है या उसका आकार बदला जाता है, तो कक्षा वाला तत्व infoअपनी hविशेषता को अपडेट कर लेगा । तब आपके पास style="height: __"उस पूर्व निर्धारित hमान पर सेट करने के लिए एक बटन ट्रिगर हो सकता है ।

function moreInformation() {
  $('.icon-container').click(function() {
    var info = $(this).closest('.dish-header').next('.info'); // Just the one info
    var icon = $(this).children('.info-btn'); // Select the logo

    // Stop any ongoing animation loops. Without this, you could click button 10
    // times real fast, and watch an animation of the info showing and closing
    // for a few seconds after
    icon.stop();
    info.stop();

    // Flip icon and hide/show info
    icon.toggleClass('flip');

    // Metnod 1, animation handled by JS
    // info.slideToggle('slow');

    // Method 2, animation handled by CSS, use with setInfoheight function
    info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

  });
};

यहाँ infoवर्ग के लिए स्टाइल है ।

.info {
  display: inline-block;
  height: 0px;
  line-height: 1.5em;
  overflow: hidden;
  padding: 0 1em;
  transition: height 0.6s, padding 0.6s;
  &.active {
    border-bottom: $thin-line;
    padding: 1em;
  }
}

मैंने अपनी परियोजनाओं में से एक पर इसका इस्तेमाल किया इसलिए वर्ग के नाम विशिष्ट हैं। आप अपनी पसंद के अनुसार उन्हें बदल सकते हैं।

स्टाइल क्रॉस-ब्राउज़र समर्थित नहीं हो सकता है। क्रोम में ठीक काम करता है।

इस कोड के लिए नीचे लाइव उदाहरण है। ?एनीमेशन शुरू करने के लिए आइकन पर क्लिक करें

CodePen

— क्रूज़ नुनेज़
स्रोत
1

जावास्क्रिप्ट के बिना भिन्न। केवल सीएसएस।

सीएसएस:

.toggle_block {
    border: 1px solid #ccc;
    text-align: left;
    background: #fff;
    overflow: hidden;
}
.toggle_block .toggle_flag {
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    z-index: 0;
    left: -1000px;
}
.toggle_block .toggle_key {
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content {
    padding: 0 10px;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content .toggle_close {
    cursor: pointer;
    font-size: 12px;
}
.toggle_block .toggle_flag:checked ~ .toggle_key {
    background: #dfd;
}
.toggle_block .toggle_flag:checked ~ .content {
    max-height: 1000px;
    padding: 10px 10px;
}

HTML:

<div class="toggle_block">
    <input type="checkbox" id="toggle_1" class="toggle_flag">
    <label for="toggle_1" class="toggle_key">clicker</label>
    <div class="content">
        Text 1<br>
        Text 2<br>
        <label for="toggle_1" class="toggle_close">close</label>
    </div>
</div>

अगले ब्लॉक के लिए केवल html में और ID विशेषताओं में परिवर्तन करें।

— Szen
स्रोत
0

आप आसानी से css3 tha के साथ स्लाइडशोल्ड नहीं बना सकते हैं क्यों मैंने JensT स्क्रिप्ट को जावास्क्रिप्ट फॉलबैक और कॉलबैक के साथ एक प्लगइन में बदल दिया है।

इस तरह से यदि आपके पास आधुनिक ब्रॉउज़र है तो आप css3 csstransition का उपयोग कर सकते हैं। यदि आपका ब्राउज़र इसका समर्थन नहीं करता है तो पुराने जमाने की स्लाइडअप का उपयोग करें।

 /* css */
.csstransitions .mosneslide {
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
  -ms-transition: height .4s ease-in-out;
  -o-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
  max-height: 9999px;
  overflow: hidden;
  height: 0;
}

प्लगइन

(function ($) {
$.fn.mosne_slide = function (
    options) {
    // set default option values
    defaults = {
        delay: 750,
        before: function () {}, // before  callback
        after: function () {} // after callback;
    }
    // Extend default settings
    var settings = $.extend({},
        defaults, options);
    return this.each(function () {
        var $this = $(this);
        //on after
        settings.before.apply(
            $this);
        var height = $this.height();
        var width = $this.width();
        if (Modernizr.csstransitions) {
            // modern browsers
            if (height > 0) {
                $this.css(
                    'height',
                    '0')
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                var clone =
                    $this.clone()
                    .css({
                        'position': 'absolute',
                        'visibility': 'hidden',
                        'height': 'auto',
                        'width': width
                    })
                    .addClass(
                        'mosne_slideClone'
                )
                    .appendTo(
                        'body'
                );
                var newHeight =
                    $(
                        ".mosne_slideClone"
                )
                    .height();
                $(
                    ".mosne_slideClone"
                )
                    .remove();
                $this.css(
                    'height',
                    newHeight +
                    'px')
                    .removeClass(
                        "mosne_hidden"
                );
            }
        } else {
            //fallback
            if ($this.is(
                ":visible"
            )) {
                $this.slideUp()
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                $this.hide()
                    .slideDown()
                    .removeClass(
                        "mosne_hidden"
                );
            }
        }
        //on after
        setTimeout(function () {
            settings.after
                .apply(
                    $this
            );
        }, settings.delay);
    });
}
})(jQuery);;

इसका इस्तेमाल कैसे करें

/* jQuery */
$(".mosneslide").mosne_slide({
    delay:400,
    before:function(){console.log("start");},
    after:function(){console.log("done");}
});

आप यहां एक डेमो पेज पा सकते हैं http://www.mosne.it/playground/mosne_slide_up_down/

— mosne
स्रोत
यह एक उत्तर नहीं है, एक उत्तर में केवल एक लिंक है।
— मैक्स
यह प्रश्न का उत्तर प्रदान नहीं करता है। किसी लेखक से स्पष्टीकरण मांगने या उसका अनुरोध करने के लिए, उनके पोस्ट के नीचे एक टिप्पणी छोड़ दें - आप हमेशा अपने स्वयं के पोस्ट पर टिप्पणी कर सकते हैं, और एक बार आपके पास पर्याप्त प्रतिष्ठा होने पर आप किसी भी पोस्ट पर टिप्पणी करने में सक्षम होंगे ।
— चौथा
हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक हिस्सों को यहां शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।
— शशकेलो
0 
    try this for slide up slide down with animation 
give your **height

        @keyframes slide_up{
            from{
                min-height: 0;
                height: 0px;
                opacity: 0;
            }
            to{
                height: 560px;
                opacity: 1;
            }
        }

        @keyframes slide_down{
            from{
                height: 560px;
                opacity: 1;
            }
            to{
                min-height: 0;
                height: 0px;
                opacity: 0;
            } 
        }
— उमा महेश
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.