জ্যাকুরি পটভূমির রঙ পরিবর্তন করুন

Question

আমি এই উদাহরণ দিয়ে jquery চেষ্টা করে যাচ্ছিলাম:

 $(document).ready(function(){
      $("button").mouseover(function(){
        $("p#44.test").css("background-color","yellow");
        $("p#44.test").hide(1500);
        $("p#44.test").show(1500);
        $("p#44.test").css("background-color","red");
      });
    });

আমি আশা করি নিম্নলিখিতগুলি ঘটবে:

1. Color of <p> to turn yellow
2. <p> to slowly fade
3. <p> to slowly show
4. Color of <p> to turn red

কিন্তু বাস্তবে এটি ঘটেছিল:

1. <p> turned red
2. <p> slowly hid away
3. <p> slowly showed

কেন এমন?

Answer 1

.css()ফাংশন চলমান অ্যানিমেশন পিছনে সারিতে না, এটি ক্ষণিক আছে।

আপনি যে আচরণটি পরে করছেন তা মেলানোর জন্য আপনাকে নিম্নলিখিতগুলি করতে হবে:

$(document).ready(function() {
  $("button").mouseover(function() {
    var p = $("p#44.test").css("background-color", "yellow");
    p.hide(1500).show(1500);
    p.queue(function() {
      p.css("background-color", "red");
    });
  });
});

.queue()ফুরিয়ে অ্যানিমেশন চালানোর জন্য ফাংশন অপেক্ষা করছে এবং তারপর আগুন যাই হোক না কেন সরবরাহকৃত ফাংশনে আছে।

Answer 2

এটা হচ্ছে তাই, যা করা উচিত:

কোড:

$(function(){
  $("button").mouseover(function(){
    var $p = $("#P44");
    $p.stop()
      .css("background-color","yellow")
      .hide(1500, function() {
          $p.css("background-color","red")
            .show(1500);
      });
  });
});

ডেমো: http://jsfiddle.net/p7w9W/2/

ব্যাখ্যা:

আপনার পটভূমির রঙ স্যুইচ করার আগে আপনাকে অ্যানিমেটিং ফাংশনে কলব্যাকের জন্য অপেক্ষা করতে হবে। আপনার কেবলমাত্র সংখ্যামূলক আইডি: গুলি ব্যবহার করা উচিত নয় এবং যদি আপনার <p>সেখানে একটি আইডি থাকে তবে আপনার নির্বাচকের কোনও শ্রেণি অন্তর্ভুক্ত করা উচিত নয়।

আমি আপনার কোডও বাড়িয়েছি (jQuery অবজেক্টের ক্যাচিং, চেইন ইত্যাদি)

আপডেট: ভিকোলেভের পরামর্শ অনুসারে আইটেমটি লুকানো থাকলে রঙটি এখন বদলে যাচ্ছে।

Comments

$ P.css ("পটভূমির রঙ", "লাল") সেট করা; পি-কন্টেন্টটি আবার দেখানোর পরে bl পি.শো এটিকে কিছুটা সুন্দর করে তুলবে it

— ভিক্লেভ

Answer 3

শেষ রঙের বিবর্ণে বিলম্ব করার চেষ্টা করুন।

$("p#44.test").delay(3000).css("background-color","red");

এইচটিএমএলে আইডি বৈশিষ্ট্যের জন্য বৈধ মানগুলি কী কী?
আইডি এর সংখ্যা দিয়ে শুরু করা যায় না !!!

Comments

দ্বিতীয় উদাহরণটি কাজ করবে না, যেহেতু .css()ফাংশনটি অ্যানিমেশন প্রবাহে শৃঙ্খলাবদ্ধ নয়।

— ক্লেনেন স্লাভিč