web-dev-qa-db-fra.com

Comment animer une couleur d'arrière-plan en transparent dans jQuery?

Je peux animer de transparent à couleur, mais lorsque je demande à jQuery d’animer l’arrière-plan backgroundColor: «transparent», il devient simplement blanc. Une idée comment résoudre ce problème?

jqueryjquery-uitransparent
40
Casey

Transparent n'est pas vraiment une couleur. Donc, vous ne pouvez pas l'animer. Vous pourrez peut-être obtenir l'effet que vous recherchez en utilisant un élément distinct pour l'arrière-plan et en animant l'opacité.

Exemple:

HTML:

<body style="background-color:yellow">
  <!-- by default, "see through" to parent's background color -->
  <div id="container"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Aenean nec magna. Nulla eu mi sit amet nibh pellentesque vehicula. 
    Vivamus congue purus non purus. Nam cursus mollis lorem.    
  </div>
</body>

Scénario:

// on load...
$(function()
{
  var container = $("#container");
  container
    .hover(
      // fade background div out when cursor enters, 
      function() 
      { 
        $(".background", this).stop().animate({opacity:0}); 
      }, 
      // fade back in when cursor leaves
      function() 
      { 
        $(".background", this).stop().animate({opacity:1}) 
      })
    // allow positioning child div relative to parent
    .css('position', 'relative')
    // create and append background div 
    // (initially visible, obscuring parent's background)
    .append( $("<div>")
      .attr('class', 'background')
      .css({
        backgroundColor:'blue',
        position: 'absolute',
        top:0,
        left:0,
        zIndex:-1,
        width:container.width(), 
        height:container.height()
      }) 
    );
});

Le commentaire de Kingjeffrey indique que cette réponse est quelque peu dépassée - les navigateurs prennent désormais en charge les valeurs de couleur RGBA, de sorte que vous pouvez animer uniquement l'arrière-plan. Cependant, jQuery ne supporte pas cela dans le noyau - vous aurez besoin d’un plugin . Voir aussi: jQuery + animations couleur RGBA

22
Shog9

Je voulais faire cela et comme je ne pouvais pas le trouver, je l'ai piraté ensemble. Ceci est uniquement pour le blanc, convient à vos besoins:

function animate_bg(ele, from, to) {
    ele.css("background-color", "rgba(255, 255, 255, " + (from += from > to ? -1 : 1) / 10 + ")"); 
    if(from != to)  
        setTimeout(function() { animate_bg(ele, from, to) }, 20);
}

Utilisation: 

$("a").hover(
    function() {return animate_bg($(this), 0, 10)},
    function() {return animate_bg($(this), 10, 0)}
);
 </ pre>
11
Linus Gustav Larsson Thiel
$(selector)
    .css({backgroundColor:"#f00"})
    .animate({backgroundColor:"transparent"}, 2000, null, 
    function() { this.style.backgroundColor='transparent'; });

Pas aussi propre car il fade le bg en blanc avant de le rendre transparent, mais c'est une option.

8
lucky760

Vous pouvez utiliser la couleur rgba (61, 31, 17, 0.5) où 0.5 est l'opacité. Ensuite, si vous voulez transparent, définissez l'opacité sur 0.0 

$('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
3
Merlin

Utiliser la transition CSS:

$('smth').css('transition','background-color 1s').css('background-color','transparent')

ou

$('h1').css({'transition':'background-color 1s','background-color':'red'})
2
Dimava

J'ai utilisé la réponse de Linus mais j'ai rencontré IE. Changé un peu pour fonctionner aussi dans IE:

function animate_bg(ele, from, to) {
    from += from > to ? -1 : 1;
    if(!$.support.opacity){
        if(from != to){
            var opStr = (Math.round(from * 25.5)).toString(16);
            //alert(opStr)
            ele.css({background:'transparent',filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#" + opStr + "FFFF00, endColorstr=#" + opStr + "FFFF00)"});   
        }else{
            ele.css({background:'transparent',filter:"none"});   
        }
    }else{
        ele.css("backgroundColor", "rgba(255, 255, 0, " + (from) / 10 + ")"); 
    }

    if(from != to)  
        setTimeout(function() { animate_bg(ele, from, to) }, 50);
}

L'utilisation est la même:

$("a").hover(
    function() {return animate_bg($(this), 0, 10)},
    function() {return animate_bg($(this), 10, 0)}
);
2
Maarten Wolzak

J'ai un peu modifié le code de Shog9 pour l'adapter à mes besoins ... C'est un peu comme le jQuery UI Highlight, sauf qu'il ne s'estompe pas en blanc. Ce n'est pas parfait, mais cela fonctionne sur la plupart des éléments

function highlight(element, color, speed) {
if (speed == null) speed = "fast";
var e;
var position;
element.each(function() {
    e = $(this);
    position = e.css('position');
    if (position != 'absolute')
        e.css('position', 'relative');
    log(position);
    e.append($("<div>")
        .css({
            backgroundColor: color,
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: -1,
            display: "none",
            width: e.width(),
            height: e.height()
        }).fadeIn(speed).fadeOut(speed, function() { $(this).remove(); e.css('position', position); })

      );
}); }
1
Contra

J'ai utilisé le paramètre de fonction pour supprimer le style une fois l'animation terminée:

$('[orgID=' + orgID + 'bg]').animate({ backgroundColor: "white" }, 300, "linear", function()
 {
     $('[orgID=' + orgID + 'bg]').css('background-color', '');
});

Cela a très bien fonctionné.

1
Porter

Vous devez l'enchaîner. 

Par exemple, vous ne pouvez pas faire ceci:

$('#panel').animate({'backgroundColor' : 'rgba(255,255,0,0.7', 'opacity': 1}, 3000);

ou même

$('#panel').animate({'background-color' : 'yellow', 'opacity': 1}, 3000);

mais vous pouvez faire ceci:

$('#panel').css('background-color', 'rgba(255,255,0,0.7)').animate({'opacity': 1}, 3000);
1
Matt

Utilisez le plugin jQuery Color: https://github.com/jquery/jquery-color

Vos animations transparentes et rgba fonctionneront correctement.

1
Ondrej Machulda

Utilisez background au lieu de backgroundColor:

$('#myDiv').animate({background: "transparent"});
0
user2755541

Ma solution consistait à animer la couleur vue par l'utilisateur (c'est-à-dire la couleur de l'élément parent), puis à la couleur d'origine (qui peut ou non être "transparente") une fois l'animation terminée.

var $t = $(some selector);

var seenColour = findColour($t, 'background-color');
var origColour = $t.css('background-color');
$t.css('background-color', '#ffff99');
$t.animate(
    {backgroundColor: seenColour}, 
    4000, 
    function(){ $t.css('background-color', origColour)}
);

function findColour($elem, colourAttr)
{
    var colour = $elem.css(colourAttr);
    if (colour === 'transparent')
    {
        var $parent = $elem.parent();
        if ($parent)
        {
            return findColour($parent, colourAttr);
        }
        // Default to white
        return '#FFFFFF'; 
    }
    return colour;
}
0
AaronHolland