Как мне анимировать цвет фона на прозрачный в jQuery? - PullRequest
Новая
       13

Как мне анимировать цвет фона на прозрачный в jQuery?

40 голосов
/ 19 марта 2009

Я могу анимировать от прозрачного до цветного, но когда я говорю jquery анимировать backgroundColor: 'transparent', он просто меняется на белый. Есть идеи как это исправить?

Ответы [ 12 ]

22 голосов
/ 19 марта 2009

Прозрачный на самом деле не цвет. Таким образом, вы не можете оживить это. Вы можете достичь нужного эффекта, используя отдельный элемент для фона и анимируя прозрачность.

Пример:

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>

Сценарий: 

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

В комментарии Кингжеффри отмечается, что этот ответ несколько устарел - браузеры теперь поддерживают значения цвета RGBA, поэтому вы можете анимировать только фон. Однако jQuery не поддерживает это в ядре - вам понадобится плагин . Смотрите также: Цветовая анимация jQuery + RGBA

11 голосов
/ 17 марта 2010

Я хотел сделать это, и так как я не мог найти это, я взломал это вместе. Это только для белого цвета, подходит под ваши нужды: 

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);
}

Использование: <pre> $("a").hover( function() {return animate_bg($(this), 0, 10)}, function() {return animate_bg($(this), 10, 0)} );

8 голосов
/ 16 ноября 2009 
$(selector)
    .css({backgroundColor:"#f00"})
    .animate({backgroundColor:"transparent"}, 2000, null, 
    function() { this.style.backgroundColor='transparent'; });

Не так чисто, потому что он превращает bg в белый, прежде чем сделать его прозрачным, но это вариант.

3 голосов
/ 01 мая 2012

Вы можете использовать цвет rgba (61, 31, 17, 0.5), где 0.5 - непрозрачность. Затем, если вы хотите прозрачный, установите непрозрачность 0.0 

$('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
2 голосов
/ 01 января 2016

Использовать переход CSS: 

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

или 

$('h1').css({'transition':'background-color 1s','background-color':'red'})
2 голосов
/ 06 октября 2010

Я использовал ответ Линуса, но наткнулся на IE. Немного изменил его для работы в 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);
}

Использование такое же: 

$("a").hover(
    function() {return animate_bg($(this), 0, 10)},
    function() {return animate_bg($(this), 10, 0)}
);
1 голос
/ 09 января 2013

Вы должны зацепить это.

Например, вы не можете сделать это: 

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

или даже 

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

но вы можете сделать это: 

$('#panel').css('background-color', 'rgba(255,255,0,0.7)').animate({'opacity': 1}, 3000);
1 голос
/ 11 сентября 2012

Используйте плагин jQuery Color: https://github.com/jquery/jquery-color

Будет работать как ваша прозрачная анимация, так и анимация rgba.

1 голос
/ 29 июня 2011

Я использовал параметр функции для удаления стиля после завершения анимации: 

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

Отлично сработало.

1 голос
/ 28 августа 2009

Я немного изменил код Shog9 под свои нужды. Это похоже на подсветку пользовательского интерфейса jQuery, только оно не исчезает в белом. Это не идеально, но работает на большинстве элементов 

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); })

      );
}); }
Страница:
...