কীভাবে প্রদর্শিত হবে বিবর্ণ: ইনলাইন-ব্লক

Question

আমার পৃষ্ঠায় আমার কাছে একটি গুচ্ছ (প্রায় 30) ডোম নোড রয়েছে যা অদৃশ্য হওয়া উচিত এবং সেগুলি সম্পূর্ণ লোড হয়ে যাওয়ার পরে বিবর্ণ হয়ে যায়।
উপাদানগুলির একটি প্রদর্শন দরকার: ইনলাইন-ব্লক স্টাইল।

আমি jquery .fadeIn () ফাংশনটি ব্যবহার করতে চাই। এটির প্রাথমিকভাবে একটি প্রদর্শন থাকতে হবে: কোনওটি নয়; প্রাথমিকভাবে এটি আড়াল করার নিয়ম করুন। ফেডইন () এর পরে অবশ্যই উপাদানগুলির ডিফল্ট প্রদর্শন রয়েছে: উত্তরাধিকারসূত্রে;

উত্তরাধিকার ব্যতীত অন্য কোনও ডিসপ্লের সাথে আমি কীভাবে বিবর্ণ কার্যকারিতাটি ব্যবহার করতে পারি?

Answer 1

আপনি ডিসপ্লেটি আক্রান্ত না করে নিজেই অস্বচ্ছতাটি পরিবর্তন করতে jQuery এর অ্যানিমেট ফাংশনটি ব্যবহার করতে পারেন ।

Comments

আমি এই সমাধানটি আরও ভাল পছন্দ করি, সিএসএসকে আমার জেএস থেকে দূরে রাখে।

— জোশুডেলেঞ্জ

@ জোশুয়াডেলেঞ্জ আসলেই নয়, অস্বচ্ছতাও সিএসএস

— রায়

এলেন্টগুলি কোথায় হওয়া উচিত সেগুলি দেখানোর / আড়াল করার ইঞ্জিনিয়ারিং প্রক্রিয়াটিকে ফোকাস করার জন্য +1।

— ক্লিউস

Answer 2

$("div").fadeIn().css("display","inline-block");

Comments

এটি অবশ্যই ভাল উত্তর।

— জেসন

দুর্দান্ত উত্তর! আরও ভাল, আপনি আপনার সিএসএসে যা আছে তা ডিফল্টরূপে খালি রেখে দিতে পারেন:$("div").fadeIn().css("display","");

— ব্র্যান্ডন ডারহাম

এটি সত্যই গ্রহণযোগ্য উত্তর হওয়া উচিত; বিদ্যমান গৃহীত উত্তর একটি মন্তব্য বেশি।

— Sinister দাড়ি

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });এই প্রদর্শনটি নিশ্চিত হওয়ার জন্য: ফ্যাদেইন শেষ হয়ে গেলে ইনলাইন-ব্লকটি করা হয়

— সাইমন

এটি আমার পক্ষে কাজ করে না ... একটি প্রাথমিক স্তরের সাথে একটি ডিভিতে প্রয়োগ করা হয় যা ক্লাস ব্যবহার না করে সেট করে। উপাদানটি পরিদর্শন করে আমি দেখতে পাচ্ছি যে কিছু মিলিসেকেন্ডের জন্য, ফ্যাদইন কল করার পরে, এটির স্টাইলটিতে ইনলাইন-ব্লক রয়েছে, তারপরে শৈলীটি ব্লক হয়ে গেছে। সাইমন পরামর্শের সাথে প্রভাবটি ভাল নয়, যেমন ফেডের সময় উপাদানটি ব্লক হিসাবে প্রদর্শিত হয়

— জিওক্স

Answer 3

ফিলের ভাল ধারণাটি প্রকাশের জন্য, এখানে একটি ফেইডইন () রয়েছে যা প্রতিটি উপাদানটিতে ক্লাসের সাথে ফিডগুলি লোড করে turn পরিবর্তে বিবর্ণ হয়ে, অ্যানিমেটে রূপান্তরিত হয় ():

পুরাতন:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

নতুন:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

আশা করি যে আমার মতো আরেকটি jQuery newb কে সহায়তা করবে :) এটি করার আরও ভাল উপায় যদি থাকে তবে দয়া করে আমাদের বলুন!

Answer 4

মাকুরার উত্তর আমার পক্ষে কার্যকর হয়নি তাই আমার সমাধানটি হয়েছিল

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide অবিলম্বে প্রযোজ্য display: none তবে তার আগে এটি jQuery ডেটা ক্যাশে বর্তমান প্রদর্শন মান সংরক্ষণ করে যা পরবর্তী অ্যানিমেশন কল দ্বারা পুনরুদ্ধার করা হবে।

সুতরাং divশুরু হিসাবে স্থিতিশীল হিসাবে সংজ্ঞায়িত display: none। তারপরে এটি সেট করা আছে inline-blockএবং তত্ক্ষণাত কেবল লুকিয়ে ফেলা হবে hiddeninline-block

Answer 5

এর জন্য jQuery ডক্স অনুসারে .show(),

যদি কোনও উপাদানটির ইনলাইনের একটি ডিসপ্লে মান থাকে, তবে তা লুকিয়ে রেখে দেখানো হয়, এটি আবার একবার ইনলাইন প্রদর্শিত হবে।

সুতরাং এই সমস্যার সমাধান করার জন্য আমার ক্লাস ডিসপ্লেতে সিএসএস রুল প্রয়োগ করা ছিল: উপাদানটিতে ইনলাইন-ব্লক, তারপরে আমি "লুকোচুরি" নামে আরও একটি ক্লাস যুক্ত করেছি যা প্রদর্শনটি প্রয়োগ করে: কিছুই নয়; আমি যখন .show()উপাদানটিতে থাকি তখন এটি ইনলাইন দেখায়।

Comments

আমি ধরে নেব যে আপনি সেট করার পরে এটি কাজ করা উচিত #el{display:inline-block;display:none;}এবং তারপরে $('#el').fadeIn();আপনি ইনলাইন-ব্লক পান run তবে তা হয় না।

— ফ্যানকি

Answer 6

এটি display:noneসিএসএস দ্বারা প্রিসেট নিয়েও কাজ করে। ব্যবহার

$('#element').fadeIn().addClass('displaytype');

(এবং এছাড়াও $('#element').fadeOut().removeClass('displaytype');)

সিএসএসে সেটআপ সহ:

#element.displaytype{display:inline-block;}

আমি বিশ্বাস করি fadeIn()যে এটি কাজ করা উচিত বলে আমার বিশ্বাস করা উচিত যাতে এটি কেবল শেষ নিয়মটি সরিয়ে ফেলতে display:noneপারে - যখন সেট করা হয় #element{display:inline-block;display:none;}তবে এটি দুজনকে অপসারণ করে।