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

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

— প্রশ্নগুলি /596608/ স্লাইড- রাইট- টু-

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

ধন্যবাদ ... তবে আমি উভয় প্রভাব একই ডিভের উপর চাই .. যেমন ডান থেকে বামে খুলতে এবং তারপরে বাম থেকে ডানে বা বিপরীতভাবে বন্ধ করতে ...

— জয়ন্ত বর্ষনী

ঠিক আছে, তাহলে সমাপ্তি কলব্যাকে ক্লাস স্যুইচিংয়ের বিষয়ে কীভাবে? :-)

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