kzen.dev
Viac na
Question

Jquery zmeniť farbu pozadia

Skúšal som jquery s týmto príkladom:

 $(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");
      });
    });

Očakával som, že sa stane nasledovné:

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

Ale v skutočnosti sa stalo toto:

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

Prečo je to tak?

Paul Sasik
Paul Sasik
Edited question 6 január 2014 в 8:02
Programovanie
jquery
Solution / Answer

Funkcia .css() nečakajúca na spustenie animácie, je okamžitá.

Aby ste dosiahli správanie, o ktoré vám ide, museli by ste urobiť nasledovné:

$(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");
    });
  });
});

Funkcia .queue() čaká na vyčerpanie bežiacich animácií a potom spustí čokoľvek, čo je v dodanej funkcii.

fureigh
fureigh
Edited answer 9 december 2013 в 11:18
195
Artificial intelligence to parse product page
productapi.dev

Takto by to malo byť:

Kód:

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

Demo:

Vysvetlenie:

Pred prepnutím farby pozadia musíte počkať na spätné volanie animačných funkcií. Tiež by ste nemali používať len číselné ID:s, a ak tam máte ID vášho <p>, nemali by ste'do selektora zahrnúť triedu.

Taktiež som vylepšil váš kód (cachovanie objektu jQuery, reťazenie atď.).

Aktualizácia: Ako navrhol VKolev, farba sa teraz mení, keď je položka skrytá.

Peter &#214;rneholm
Peter Örneholm
Edited answer 26 november 2010 в 12:36
19
Artificial intelligence to parse product page
productapi.dev

skúste nastaviť oneskorenie na posledné blednutie farby.

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

https://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes-in-html ID's nemôže začínať číslicami!!!

Community
Community
Edited answer 23 máj 2017 в 11:47
14