আমি 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});
});
এটি আমি যে সকল আচরণটি খুঁজছি তা প্রদর্শন করে:
- লাল এবং নীল মধ্যে মসৃণভাবে অ্যানিমেটগুলি।
- ব্যবহারকারী যখন তাদের মাউসটিকে ডিভের মধ্যে এবং বাইরে দ্রুত সরিয়ে ফেলেন তখন কোনও অ্যানিমেশন নেই 'ওভার্কিউ-ইনিং'।
- যদি অ্যানিমেশনটি চলমান থাকে তবে ব্যবহারকারী যদি তাদের মাউসটিকে আউট / ইন সরিয়ে রাখে তবে এটি বর্তমান 'অর্ধপথ' অবস্থা এবং নতুন 'লক্ষ্য' অবস্থার মধ্যে সঠিকভাবে হ্রাস পাবে।
তবে যেহেতু শৈলীর পরিবর্তনগুলি সংজ্ঞায়িত করা হয়েছে সেহেতু 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
কেবল সরবরাহিত শ্রেণীর বিষয়বস্তু ফিরে আসবে। মূল বক্তব্যটি হ'ল এইভাবে আমার শৈলীর সংজ্ঞা সমস্ত জায়গায় রাখতে হবে না, তবে সেগুলি আমার স্টাইলশিটে ক্লাসে রাখতে পারে।
getClassContent
দেখাচ্ছে?