ডান থেকে বাম দিকে স্লাইড?

Question

আমি কীভাবে একটি ডিভ ভেদ থেকে বিস্তৃত (এবং বিপরীতে) যেতে যেতে পারি, তবে ডান থেকে বামে এটি করতে পারি?

আমি যা দেখি সেখানে বেশিরভাগই সর্বদা বাম থেকে ডানে থাকে।

Comments

উপাদানগুলি বিভিন্ন দিকে স্লাইড করার জন্য একটি দুর্দান্ত টিউটোরিয়াল ।

— ছাতু

যেমন jsfiddle.net/DcWS2/10

— স্ট্যানো

সম্পর্কিত: স্ট্যাকওভারফ্লো

— সিকিউশনস / ৫২১২৯৯/jquery-slide-left-and-

Answer 1

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

তথ্যসূত্র: https://api.jquery.com/animate/

Comments

paddingLeft: 'toggle', paddingRight: 'toggle'যখন উপাদানটির অভ্যন্তরীণ প্যাডিং থাকে তখন আপনি যুক্ত করতে পারেন ।

— piotr_cz

দুর্দান্ত কাজ করে, যখন আমি এটি চেষ্টা করি কেবল বাম থেকে ডানে স্লাইড হয়। এটি কি অন্য উপায়ে চারপাশে প্রাণবন্ত করা সম্ভব?

— টোয়ান

একমাত্র সমস্যাটি হ'ল যদি ভিতরে সামগ্রী থাকে তবে এটি অনুভূমিকভাবে "স্কোয়াশ" করে, যার ফলে নিয়ন্ত্রণ / পুনরায় আকার / মোড়কের নিয়ন্ত্রণ সরিয়ে আনা হয় that এর কি কোনও ভাল সমাধান আছে?

— নিল বার্নওয়েল

আপনার CSS

— কোডটির

@ নীলবার্নওয়েল যদি আপনি পারেন তবে সামগ্রীগুলি নির্দিষ্ট প্রস্থের মোড়কে রাখুন এবং ধারকটি রাখুন 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/Effected/Slide

Comments

@ ওকারনার - এর জন্য জিকুয়েরিআইআই দরকার যা একটি বিশাল গ্রন্থাগার। আপনি যা চান তা যদি একটি সাধারণ স্লাইড ট্রানজিশন হয় তবে এটি সম্ভবত উত্তর নয়;)

— জেসি

আপনি jQueryUI ইনস্টল করা থাকলে এটি সেরা উপায়।

— 39

স্পষ্ট করতে - মিনিটের ফাইলটি কমপক্ষে 235kb হয় !! এটি ভাল তবে এটি আপনার পৃষ্ঠায় যথেষ্ট পরিমাণে যুক্ত হবে কারণ @ জেসি উল্লেখ করেছেন

— ইউকুসার 32

কাস্টম নির্মাতা ব্যবহার করে এবং স্লাইড অ্যানিমেশন ব্যতীত সমস্ত কিছু সরিয়ে ফেলা, 20KB এর নিচে মিনিকেড জেএস পাওয়া সম্ভব।

— স্কাইলার ইটনার

আমি আশা করি JQuery UI ডক্সের উদাহরণ রয়েছে examples ধন্যবাদ

— 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

'পিক্স' এর মান গণনা করে, '%' এর জন্য সম্ভব না

— ফয়সাল আশফাক

এটি প্রতিটি ক্লিকে বাম দিকে চলেছে।

— এলিয়র

আপনি বাইরের প্রস্থটি পরীক্ষা করতে পারেন এবং ডান মার্জিন যুক্ত করতে এটি ব্যবহার করতে পারেন

— তোফানডেল

Answer 4

জিডকিউরি ইউআই ব্যবহার করে ফিডল- এ এই কার্যকারী উদাহরণটি একবার দেখুন । এটি একটি সমাধান যা আমি মূলত বাম থেকে ডানে ব্যবহার করেছি, তবে আমি এটিকে ডান থেকে বামে কাজ করতে পরিবর্তন করেছি।

এটি উপলব্ধ প্যানেলগুলির মধ্যে অ্যানিমেশনটি না ভেঙে দিয়ে ব্যবহারকারীদের দ্রুত লিঙ্কগুলিতে ক্লিক করতে দেয়।

জাভাস্ক্রিপ্ট কোড সহজ:

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

এইচডিএমএল এবং সিএসএস ফিডল লিঙ্কে পান।

আরও ভাল প্রভাব উপস্থাপনের জন্য সাদা ব্যাকগ্রাউন্ড এবং বাম-প্যাডিং যুক্ত করা হয়েছে।

Comments

jQuery ইউআই দরকার

— জেরোইন কে

হ্যাঁ. এটি প্রদত্ত উদাহরণের লিঙ্কে ইঙ্গিত করা হয়েছে [ jsfiddle.net/erwinjulius/az4JL/]

— এরউইন জুলিয়াস

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

হ্যাঁ, আপনার বর্ধিত

— সরল

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

আর একটি উল্লেখযোগ্য লাইব্রেরি হ'ল অ্যানিমেট সিএসএস । এটি jQuery এর সাথে দুর্দান্ত কাজ করে এবং আপনি কেবল CSS ক্লাসগুলিতে টগল করে প্রচুর আকর্ষণীয় অ্যানিমেশনগুলি করতে পারেন।

ভালো লেগেছে ..

"(" # স্লাইড ")। টগল ()। টগলক্লাস ('অ্যানিমেটেড বাউন্সআইনফিট');

Answer 9

GreenSock অ্যানিমেশন প্ল্যাটফর্ম (GSAP) সঙ্গেTweenLite/TweenMaxjQuery এর বা সিএসএস 3 ট্রানজিশন চেয়ে অনেক বেশি স্বনির্ধারণ সঙ্গে অনেক বাধামুক্ত স্থানান্তর প্রদান করে। টিউনলাইট / টিউনম্যাক্সের সাহায্যে সিএসএসের বৈশিষ্ট্যগুলি অ্যানিমেট করার জন্য আপনার "সিএসপিপ্লাগিন" নামে তাদের প্লাগইনও প্রয়োজন। টিউনম্যাক্স এটিকে স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত করে।

প্রথমে টিউনম্যাক্স লাইব্রেরি লোড করুন:

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

আপনার যদি জিকিউরি বোঝাই থাকে তবে আপনি নির্দিষ্ট শ্রেণিযুক্ত সমস্ত উপাদানগুলির মতো আরও উন্নত বিস্তৃত নির্বাচক ব্যবহার করতে পারেন:

 // 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/animate/ )।

$(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

স্ক্রোলটি ব্যবহার করে আমার দ্বারা করা একটি উদাহরণ (কেবলমাত্র এইচটিএমএল, সিএসএস এবং জেএস, কেবল জ্যাকুরি লাইব্রেরি সহ)। যখন একটি বোতাম নীচে স্ক্রোল বাম দিকে স্লাইড হবে।

এছাড়াও, আমি আপনাকে পরামর্শ দিচ্ছি যদি আপনি যে কেবল একটাই চান তবে এই প্রভাবটি, 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);