जक्वरी पृष्ठभूमि का रंग बदलती है

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 ऑब्जेक्ट की कैशिंग, चेनिंग, आदि)

अद्यतन: जैसा कि VKolev द्वारा सुझाया गया है कि आइटम के छिपे होने पर रंग अब बदल रहा है।

Comments

$ P.css ("पृष्ठभूमि-रंग", "लाल") सेट करना; इससे पहले कि $ p.show इसे थोड़ा सा अच्छा बना देगा, बिना उस पलक के फिर से पी-कंटेंट दिखाने के बाद प्रभाव डालेगा।

— वीकोलेव

Answer 3

आखिरी रंग फीका पर देरी लगाने की कोशिश करें।

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

HTML में आईडी विशेषता के लिए मान्य मूल्य क्या हैं?
आईडी अंकों से शुरू नहीं हो सकती !!!

Comments

दूसरा उदाहरण काम नहीं करेगा, क्योंकि .css()फ़ंक्शन एनीमेशन फ्लो में चेन नहीं करता है।

— क्लेमेन स्लैविक