jQuery সহ অ্যাডক্লাস / রিমুভ ক্লাস অ্যানিমেট করা

Question

আমি jQuery এবং jQuery-ui ব্যবহার করছি এবং বিভিন্ন বস্তুর উপর বিভিন্ন বৈশিষ্ট্য অ্যানিমেট করতে চাই।

এখানে সমস্যাটি ব্যাখ্যা করার স্বার্থে আমি এটি একটি ডিভের মধ্যে সরল করে দিয়েছি যা নীল থেকে লাল রঙে পরিবর্তিত হয় যখন ব্যবহারকারী তার উপর মাউস দেয় s

আমি ব্যবহার করার সময় আমার যে আচরণটি চান তা পেতে সক্ষম হয়েছি animate(), তবে আমি যখন অ্যানিমেট করছি এমন শৈলীগুলি অ্যানিমেশন কোডের মধ্যে থাকতে হবে এবং তাই আমার স্টাইল শীট থেকে পৃথক। ( উদাহরণ 1 দেখুন )

একটি বিকল্প ব্যবহার করছে addClass()এবং removeClass()তবে আমি যে সঠিক আচরণটি করতে পারি তা পুনরায় তৈরি করতে পারিনি animate()। ( উদাহরণ 2 দেখুন )

---

উদাহরণ 1

আমার সাথে থাকা কোডটি একবার দেখুন animate():

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

এটি আমি যে সকল আচরণটি খুঁজছি তা প্রদর্শন করে:

1. লাল এবং নীল মধ্যে মসৃণভাবে অ্যানিমেটগুলি।
2. ব্যবহারকারী যখন তাদের মাউসটিকে ডিভের মধ্যে এবং বাইরে দ্রুত সরিয়ে ফেলেন তখন কোনও অ্যানিমেশন নেই 'ওভার্কিউ-ইনিং'।
3. যদি অ্যানিমেশনটি চলমান থাকে তবে ব্যবহারকারী যদি তাদের মাউসটিকে আউট / ইন সরিয়ে রাখে তবে এটি বর্তমান 'অর্ধপথ' অবস্থা এবং নতুন 'লক্ষ্য' অবস্থার মধ্যে সঠিকভাবে হ্রাস পাবে।

তবে যেহেতু শৈলীর পরিবর্তনগুলি সংজ্ঞায়িত করা হয়েছে সেহেতু animate()আমাকে সেখানে স্টাইলের মানগুলি পরিবর্তন করতে হবে এবং এটি কেবল আমার স্টাইলশিটে নির্দেশ করতে পারে না। শৈলীর সংজ্ঞায়িত যেখানে এই 'টুকরো টুকরো করা' এমন একটি বিষয় যা সত্যিই আমাকে বিরক্ত করে।

---

উদাহরণ 2

এখানে আমার বর্তমান সর্বোত্তম চেষ্টা addClass()এবং ব্যবহার করে দেখুন removeClass(অ্যানিমেশনটির কাজ করার জন্য আপনার জিকুয়েরি-ইউআই দরকার হবে তা নোট করুন):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

এটি আমার মূল প্রয়োজনীয়তার 1 এবং 2 সম্পত্তি দেখায়, তবে 3 কাজ করে না।

আমি এর কারণটি বুঝতে পারি:

যখন অ্যানিমেটিং addClass()এবং removeClass()jQuery উপাদানটিতে একটি অস্থায়ী শৈলী যুক্ত করে এবং তারপরে প্রদত্ত শ্রেণীর মানগুলিতে পৌঁছা না হওয়া পর্যন্ত উপযুক্ত মানগুলিকে বৃদ্ধি করে এবং কেবল তখনই এটি আসলে শ্রেণিটি যুক্ত / সরিয়ে দেয়।

এ কারণে আমাকে শৈলীর বৈশিষ্ট্যটি মুছে ফেলতে হবে, অন্যথায় যদি অ্যানিমেশনটি অর্ধেক করে বন্ধ হয়ে যায় তবে শৈলীর বৈশিষ্ট্যটি স্থায়ীভাবে কোনও শ্রেণীর মানকে ওভাররাইট করে দিতে পারে, যেহেতু কোনও ট্যাগে শৈলীর বৈশিষ্ট্যগুলি শ্রেণীর শৈলীর চেয়ে বেশি গুরুত্ব দেয়।

তবে অ্যানিমেশনটি অর্ধেক হয়ে গেলে এটি এখনও নতুন শ্রেণিটি যুক্ত করতে পারেনি, এবং এই দ্রবণটির সাহায্যে অ্যানিমেশনটি শেষ হওয়ার আগে যখন ব্যবহারকারী তাদের মাউসটি সরান তখন রঙটি পূর্বের রঙের সাথে লাফিয়ে যায়।

---

আমি আদর্শভাবে যা চাই তা হ'ল এরকম কিছু করতে সক্ষম হোন:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

যেখানে getClassContentকেবল সরবরাহিত শ্রেণীর বিষয়বস্তু ফিরে আসবে। মূল বক্তব্যটি হ'ল এইভাবে আমার শৈলীর সংজ্ঞা সমস্ত জায়গায় রাখতে হবে না, তবে সেগুলি আমার স্টাইলশিটে ক্লাসে রাখতে পারে।

Comments

আইই এর কোন সংস্করণগুলি আপনাকে সমর্থন করতে হবে? আপনি কি আই 9 এর সাথে খুশি হবেন? বা আপনার কি কম সমর্থন করা দরকার?

— tw16

আমি মোটেই IE সম্পর্কে যত্ন নিচ্ছি না। এগুলি কেবলমাত্র ওয়েবকিট ব্রাউজারগুলির (সাফারি / ক্রোম) দিয়ে পরীক্ষা করা হয়েছে।

— জোহানেস

কেমন getClassContentদেখাচ্ছে?

— sreginogemoh

Answer 1

যেহেতু আপনি IE সম্পর্কে চিন্তিত নন তাই ক্লাস পরিবর্তন করার জন্য অ্যানিমেশন এবং jQuery সরবরাহ করতে কেবল CSS ট্রানজিশনগুলি ব্যবহার করবেন না কেন। সরাসরি উদাহরণ: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Comments

- IE 10+ - Chrome 26+ - FireFox 16+ - Safari 6.1+ - Opera 12.1+ 2015-06-12 হিসাবে এটি ওয়েবেকিত, -মোজ- এ সমর্থিত , কেবলমাত্র এমনকি পুরানো ব্রাউজারগুলির জন্যও এটি প্রয়োজন। কিছু জায়গা বাঁচাতে আপনি সম্ভবত এটি ছেড়ে দিতে পারেন।

— ক্লাস্ট

@ ক্লাস্ট, কয়েক বাইট জায়গাগুলি সাশ্রয় করার চেয়ে আমি পুরানো ব্রাউজারগুলির সাথে পিছনের দিকের সামঞ্জস্যকে পছন্দ করব।

— আরমান এইচ

Answer 2

আরেকটি সমাধান (তবে এটিতে jQueryUI প্রয়োজন যেমন মন্তব্যে রিচার্ড নীল ইলাগান নির্দেশ করেছেন): -

অ্যাডক্লাস, রিমুভ ক্লাস এবং টগলক্লাস এছাড়াও দ্বিতীয় যুক্তি গ্রহণ করে; এক সময় থেকে অন্য রাজ্যে যাওয়ার সময়কাল।

$(this).addClass('abc',1000);

Jsfiddle দেখুন: - http://jsfiddle.net/6hvZT/1/

Comments

নোট করুন যে এর জন্য jQuery UI দরকার। বাক্সের বাইরে jQuery ফাংশনগুলির জন্য অ্যানিমেশন টিউনিং সমর্থন করে না xxxClass()।

— রিচার্ড নিল ইলাগান

@ রিচার্ড নীল ইলাগান: জানানোর জন্য ধন্যবাদ। আমি সত্যিই যে পয়েন্ট মিস।

— ওমর তারিক

আপনি কি ফাইলটি ডাউনলোড করতে এবং .html ফাইলে অন্তর্ভুক্ত করতে পারেন তা আমি xxxClassকীভাবে jQueryUI কেবলমাত্র এইভাবে অ্যানিমেশনের জন্য ব্যবহার করতে পারি ?

— সোডিয়ামনেট্রেট

[jqueryui.com] (jqueryui.com) @ সোডিয়ামনিট্রেট

— জো_ ইয়ং

এই সমাধানটি স্লাইড () বা অ্যানিমেট () এর মতো একইভাবে অ্যানিমেট করে না। মিলিসেকেন্ড মানটি একটি বিলম্ব, যা কোনও অ্যানিমেশন নয়।

— সলোনা আর্মস্ট্রং

Answer 3

আপনি jquery ui ব্যবহার করতে পারেন switchClass, হেরেস একটি উদাহরণ:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

অথবা এই jsfiddle দেখুন ।

Comments

-1। আমি মূল পোস্টে তালিকাভুক্ত 1, 2 এবং 3 টি বিধিনিষেধ পূরণ করি নি। বিশেষত সুইচক্লাস 2 এবং 3 টি প্রয়োজনীয়তা হ'ল দুর্বল করে।

— জোহানেস

Answer 4

আপনি শুধু প্রয়োজন jQuery এর UI 'তে প্রভাব কোর যোগ করার সময়কাল (ঠিক ওমর তারিক মত নির্দিষ্ট) সক্রিয় করার জন্য, (13KB)

Answer 5

আমি এটি খতিয়ে দেখছিলাম কিন্তু অভ্যন্তরীণ এবং বাইরে যাওয়ার জন্য একটি আলাদা রূপান্তর হার পেতে চাই।

এটিই আমি শেষ করেছিলাম:

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

এটি তাত্ক্ষণিকভাবে পটভূমির রঙকে # 5eb4fc তে রূপান্তরিত করে এবং তারপরে আস্তে আস্তে 2 সেকেন্ডের পরে স্বাভাবিক হয়ে যায়।

এখানে একটি ঝাঁকুনি

Answer 6

যদিও, প্রশ্নটি বেশ পুরানো, আমি অন্যান্য উত্তরে উপস্থিত নেই এমন তথ্য যুক্ত করছি।

ইভেন্টটি শেষ হওয়ার সাথে সাথে বর্তমান অ্যানিমেশনটি বন্ধ করতে ওপি স্টপ () ব্যবহার করছে। তবে, ফাংশনটির সাথে পরামিতিগুলির সঠিক মিশ্রণটি ব্যবহার করা উচিত। যেমন। বন্ধ (সত্য, সত্য) বা স্টপ (সত্য, মিথ্যা) কারণ এটি সারিবদ্ধ অ্যানিমেশনগুলিকে ভালভাবে প্রভাবিত করে।

নীচের লিঙ্কটি একটি ডেমো চিত্রিত করে যা স্টপ () এর সাথে উপলব্ধ বিভিন্ন পরামিতিগুলি দেখায় এবং কীভাবে তারা সমাপ্তি () থেকে পৃথক হয়।

http://api.jquery.com/finish/

যদিও ওপিতে JqueryUI ব্যবহার করে কোনও সমস্যা ছিল না, এটি অন্যান্য ব্যবহারকারীদের জন্য যারা একই ধরণের পরিস্থিতি জুড়ে আসতে পারে তবে JqueryUI ব্যবহার করতে পারবেন না / আইই 7 এবং 8 সমর্থন করারও প্রয়োজন।