दाईं ओर बाईं ओर स्लाइड करें?

Question

मैं एक तलाक को ध्वस्त से विस्तारित (और इसके विपरीत) तक कैसे ले जा सकता हूं, लेकिन ऐसा दाएं से बाएं करें?

मैं जो कुछ भी देखता हूं उसमें से ज्यादातर हमेशा दाएं से बाएं होता है।

Comments

विभिन्न दिशाओं में तत्वों को स्लाइड करने के लिए एक महान ट्यूटोरियल ।

— चाटु

उदा। jsfiddle.net/DcWS2/10

— स्टेनो

संबं

— धत लं क

Answer 1

$("#slide").animate({width:'toggle'},350);

संदर्भ: https://api.jquery.com/animate/

Comments

paddingLeft: 'toggle', paddingRight: 'toggle'जब तत्व में आंतरिक गद्दी हो तो आप भी जोड़ सकते हैं ।

— piotr_cz

ठीक काम करता है, केवल जब मैं इसे आज़माता हूं तो यह बाएं से दाएं स्लाइड करता है। क्या यह संभव है कि इसे दूसरी तरह से चेतन किया जा सके?

— 8:16 बजे ट्विन

एकमात्र परेशानी यह है कि अगर अंदर सामग्री है, तो यह क्षैतिज रूप से "स्क्वैश" करता है, जिससे नियंत्रण के बारे में / आकार बदलने / लपेटने के लिए नियंत्रण होता है। क्या इसके लिए कोई अच्छा समाधान है?

— नील बर्नवेल

आपके कोड CSSको एक वास्तविक स्लाइड की तरह देखने के लिए और अधिक की आवश्यकता है

— AmerllicA

@NeilBarnwell यदि आप कर सकते हैं, तो सामग्री को निश्चित चौड़ाई के आवरण में रखें और कंटेनर के पास रखें overflow: hidden।

— बेन फिलिप

Answer 2

यह मूल रूप से jQueryUI छिपाने / शो विधियों का उपयोग करके प्राप्त किया जा सकता है। उदाहरण के लिए।

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

संदर्भ: http://docs.jquery.com/UI/Effects/Slide

Comments

@ekerner - इसके लिए JQueryUI की आवश्यकता होती है, जो कि एक विशाल पुस्तकालय है। यदि आप चाहते हैं कि एक सरल स्लाइड संक्रमण है, तो यह संभवतः जवाब नहीं है;)

— जेसी

यह सबसे अच्छा तरीका है अगर आपने jQueryUI इंस्टॉल किया है।

— स्टीमपॉवर

स्पष्ट करने के लिए - न्यूनतम फ़ाइल कम से कम 235kb है !! यह अच्छा है, लेकिन यह आपके पेज में काफी हद तक जोड़ देगा @Jesse बताते हैं

— Ukuser32

कस्टम बिल्डर का उपयोग करना और सब कुछ लेकिन स्लाइड एनीमेशन को हटाने के लिए, 20KB के तहत न्यूनतम जेएस प्राप्त करना संभव है।

— स्काईलार इटनर

काश JQuery यूआई डॉक्स ऐसे उदाहरण होते। धन्यवाद

— andreszs

Answer 3

इसे इस्तेमाल करो:

$('#pollSlider-button').animate({"margin-right": '+=200'});

लाइव डेमो

संशोधित संस्करण

दोहरे क्लिक पर दोहरे अंतर को रोकने के लिए डेमो में कुछ कोड जोड़ा गया है: http://jsfiddle.net/XNnHC/942/

इसे सहजता के साथ प्रयोग करें;)

http://jsfiddle.net/XNnHC/1591/

• अतिरिक्त जावास्क्रिप्ट कोड हटा दिए गए।

• क्लास के नाम और कुछ सीएसएस कोड बदल गए

• विस्तारित या ढह गई है, तो खोजने के लिए जोड़ा सुविधा

• बदल गया है कि क्या सहज प्रभाव का उपयोग करें या नहीं

• परिवर्तित एनीमेशन गति

http://jsfiddle.net/XNnHC/1808/

Comments

'Px' में मानों की गणना करता है, इसलिए '%' के लिए संभव नहीं है

— Faisal Ashfaq

यह हर क्लिक पर बाईं ओर जा रहा है।

— एलियर

आप बाहरी चौड़ाई की जांच कर सकते हैं और सही मार्जिन जोड़ने के लिए इसका इस्तेमाल कर सकते हैं

— टोफंडेल

Answer 4

Fiddle पर इस कार्य उदाहरण पर एक नज़र डालें , जो jQuery UI का उपयोग करता है । यह एक ऐसा समाधान है जिसका मैंने मूल रूप से बाएं से दाएं उपयोग किया है, लेकिन मैंने इसे दाएं से बाएं काम करने के लिए बदल दिया है।

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

जावास्क्रिप्ट कोड सरल है:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

Fiddle लिंक पर HTML और CSS प्राप्त करें।

बेहतर प्रभाव प्रस्तुति के लिए जोड़ा गया सफेद बैकग्राउंड और लेफ्ट-पेडिंग।

Comments

jQuery UI की आवश्यकता है

— Jeroen K

हाँ। यह उदाहरण दिए गए लिंक पर दिखाया गया है [ jsfiddle.net/erwinjulius/az4JL/]

— Erwin Julius

Answer 5

इसे इस्तेमाल करो

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>

Comments

हां, आपको विस्तारित सुविधा विकल्पों के लिए

— zanderwar

Answer 6

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

Comments

मैं सभी टिप्पणियों के लिए हूँ, लेकिन यह कोड बहुत ही आत्म-व्याख्यात्मक है।

— जॉन

Answer 7

मैंने इसे इस तरह किया है:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

ध्यान दें, कि नोड "बीटीएन" को एनीमेशन से पहले छिपाया जाना चाहिए, और आपको इसे "स्थिति: निरपेक्ष" सेट करने की आवश्यकता हो सकती है।

Comments

उपयोग क्यों नहीं width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});मुझे विश्वास है कि आप सभी की आवश्यकता होगी।

— ऐर्ट डेन

Answer 8

एक और उल्लेखनीय पुस्तकालय है animate.css । यह jQuery के साथ बहुत अच्छा काम करता है, और आप सीएसएस कक्षाओं को टॉगल करके बहुत सारे दिलचस्प एनिमेशन कर सकते हैं।

पसंद..

$ ("# स्लाइड")। टॉगल ()। टॉगलक्लास ('एनिमेटेड उछाल.लिफ्ट');

Answer 9

GreenSock एनिमेशन प्लेटफ़ॉर्म (GSAP) jQuery या CSS3 संक्रमणों की तुलना में कहीं अधिक अनुकूलन केसाथTweenLite/TweenMaxअधिक चिकनी बदलाव प्रदान करता है। TweenLite / TweenMax के साथ CSS गुणों को एनिमेट करने के लिए, आपको "CSSPlugin" नामक उनके प्लगइन की भी आवश्यकता होगी। TweenMax में यह स्वचालित रूप से शामिल है।

सबसे पहले, TweenMax लाइब्रेरी लोड करें:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

या हल्के संस्करण, ट्विनलाइट:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

फिर, अपने एनीमेशन पर कॉल करें:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

आप इसे आईडी चयनकर्ता भी कह सकते हैं:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

यदि आपके पास jQuery लोड है, तो आप अधिक उन्नत व्यापक चयनकर्ताओं का उपयोग कर सकते हैं, जैसे विशिष्ट वर्ग वाले सभी तत्व:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

पूर्ण विवरण के लिए, देखें: ट्विनलाइट डॉक्यूमेंटेशन

उनकी वेबसाइट के अनुसार: "टेनलाइट एक बेहद तेज़, हल्का और लचीला एनीमेशन उपकरण है जो ग्रीनसॉक एनिमेशन प्लेटफ़ॉर्म (जीएसएपी) की नींव के रूप में कार्य करता है।"

Answer 10

आप पहले तत्व की चौड़ाई को 0 के रूप में परिभाषित कर सकते हैं, दाएं चल सकते हैं, और फिर उस घटना पर जिसे आप इसे दिखाने जा रहे हैं .. यह इस तरह होगा

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

इतना ही आसान।

Answer 11

JQuery UI के बिना दाएं से बाएं एनीमेशन का एक उदाहरण , सिर्फ jQuery के साथ (किसी भी संस्करण, https://api.jquery.com/anble.com पर देखें )।

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});

.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="content">
    I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
  </div>
</div>

Answer 12

यहां उदाहरण देखें।

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

Comments

क्या आपने अपना पोस्ट करने से पहले इस उत्तर की जांच की ?

— माइकल हॉफ

Answer 13

या आप उपयोग कर सकते हैं

$('#myDiv').toggle("slide:right");

Comments

चौदह अन्य मौजूदा उत्तरों के साथ एक दस साल पुराने प्रश्न का उत्तर देने पर यह समझाने में मदद मिलेगी कि आपका उत्तर क्या नया दृष्टिकोण लाता है, और यदि यह प्रश्न पूछा गया था, तो मान्य होगा या यदि यह उन दस वर्षों के दौरान उपलब्ध तकनीकों का उपयोग कर रहा है। ।

— जेसन एलर

Answer 14

मेरे द्वारा किया गया एक उदाहरण स्क्रॉल (सिर्फ HTML, सीएसएस और जेएस, सिर्फ ज्यूरी लाइब्रेरी के साथ) का उपयोग करके किया गया है। जब स्क्रॉल डाउन होता है तो एक बटन बाईं ओर स्लाइड होगा।

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

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

चेक इस उदाहरण

Comments

हां, सीएसएस संक्रमण आजकल इसे प्राप्त करने का सबसे अच्छा तरीका है।

— टॉम टॉम

Answer 15

यदि आपकी divस्थिति बिल्कुल ठीक है और आप चौड़ाई जानते हैं, तो आप इसका उपयोग कर सकते हैं:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

जो इसे ऑफ स्क्रीन स्लाइड करेगा।

वैकल्पिक रूप से, आप इसे एक कंटेनर लपेट सकते हैं div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);