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?
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.
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á.
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!!!