jQuery: animate backgroundColor

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

1
2
3
4
5
<style type="text/css">
div#box { background-color: #eee; width:100px; height:100px }
</style>
<!-- .... -->
<div id="box"></div>
1
$('div#box').animate( {backgroundColor: "#f90"} );

Per risolvere il problema è necessario installare un’estensione: jQuery Color Animations. Questa permette di eseguire “animazioni” sull’attributo backgroundColor e non solo:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

5 commenti a: “jQuery: animate backgroundColor”

  1. 15 ott, 2008 Luca:

    Non so dire se è una mancanza voluta o meno quella dell’animare quelle proprietà ma tant’è che a volte diventa proprio fastidioso. Comunque se posso consigliare, anzichè usare il color plugin (che pure è ottimo), sarebbe meglio usare jQueryUI (solo il core, per avere lo stesso effetto) perchè oltre al codice di color c’è anche qualche fix sulle trasparenze.

    RispondiQuota
  2. 15 ott, 2008 Giovambattista Fazioli:

    @Luca: ottimo suggerimento! L’ho provato subito e funziona! Per chi usa le jsapi di Google basta inserire:

    1
    2
    3
    4
    <script type="text/javascript">
        google.load("jquery", "1.2.6");
        google.load("jqueryui", "1.5.2");
    </script>
    RispondiQuota
  3. 15 ott, 2008 Luca:

    @Giovambattista Fazioli: azz non sapevo che google forniva anche ui! Non si finisce mai di imparare :)

    RispondiQuota
  4. 15 ott, 2008 Giovambattista Fazioli:

    @Luca:

    @Giovambattista Fazioli: azz non sapevo che google forniva anche ui! Non si finisce mai di imparare

    Ed è anche veloce… :D

    RispondiQuota
  5. 17 mar, 2009 Pitufo:

    Había arrancado a hacer pavadas en mootools, pero me pasé a jQuery porque leí en varios lados que se veía mas robusta y más eficiente.
    Hasta ahora me he llevado un par de decepciones, características visuales que en moo venian incluídas y que jQuery incluye con plugins, como el animate de backgroundColor y los efectos de easing ( rebote, backins, etc…)
    SI me puedieran aclarar lo que comentó lucas me vendría 10 puntos.

    Muchas gracias

    Esteban López Adriano.
    Fúnes – Santa Fe – Argentina.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA