Fondu dans la couleur d'arrière-plan à l'aide de jQuery?

Je voudrais prendre un div et de l'arrière-plan fondu au blanc sur mouseenter et fondu de retour vers le noir sur mouseout. Toutes les idées sur la façon de le faire en jQuery?

voir api.jquery.com/hover

OriginalL'auteur user2865400 | 2013-10-18

  1. 10

    avec JQuery .hover()

      $("div" ).hover(
  function() {
     $(this).animate({backgroundColor: "#fff"}, 'slow');
  }, function() {
    $(this).animate({backgroundColor:"#000"},'slow');
  });

    avec JQuery .mouseover()

    $("div")
  .mouseover(function() {
    $(this).animate({backgroundColor: "#fff"}, 'slow');
  })
  .mouseout(function() {
    $(this).animate({backgroundColor:"#000"},'slow');
  });

    Note vous devez utiliser jquery-couleur (pour l'animation de couleurs). https://github.com/jquery/jquery-color/

    OriginalL'auteur Sobin Augustine

  2. 2

    Vous devez utiliser bibliothèque jQuery UI ou jQuery Couleurs pour activer l'animation de couleurs

    $('div').hover(function () {
    $(this).stop(true, true).animate({
        backgroundColor: 'black'
    })
}, function () {
     $(this).stop(true, true).animate({
        backgroundColor: 'white'
    })
})

    Démo: Violon

    fixe.... pour des tests de jQuery UI a été supprimé

    OriginalL'auteur Arun P Johny

  3. 0

    OP demandé jQuery. Pour ceux qui cherchent à main-libre sans jQuery:

    <div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
    var unBlue=100;
    var gEvent=setInterval("toWhite();", 100);
    function toWhite(){
        if(unBlue<255) document.getElementById("x").style.backgroundColor="rgb(255,255,"+unBlue+")";
        else clearInterval(gEvent);
        unBlue+=10;
    }
</script>

    OriginalL'auteur gordon