Я могу анимировать от прозрачного до цвета, но когда я говорю jquery для анимации backgroundColor: "прозрачный", он просто меняется на белый. Любая идея, как это исправить?
Как сделать анимированный цвет фона прозрачным в jQuery?
Ответ 1
Прозрачный на самом деле не цвет. Таким образом, вы не можете оживить его. Возможно, вы сможете добиться эффекта, который вы ищете, используя отдельный элемент для фона и анимацию непрозрачности.
Пример:
HTML:
<body style="background-color:yellow">
<!-- by default, "see through" to parent 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>
Script:
// 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 background)
.append( $("<div>")
.attr('class', 'background')
.css({
backgroundColor:'blue',
position: 'absolute',
top:0,
left:0,
zIndex:-1,
width:container.width(),
height:container.height()
})
);
});
Комментарий Kingjeffrey указывает, что этот ответ несколько устарел - браузеры теперь поддерживают значения цвета RGBA, поэтому вы можете анимировать только фон. Однако jQuery не поддерживает это в ядре - вам понадобится плагин. Смотрите также: jQuery + RGBA цветные анимации
Ответ 2
Я хотел сделать это, и так как я не мог его найти, я взломал его вместе. Это только для белых, подходит для ваших нужд:
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);
}
Использование:
$("a").hover(
function() {return animate_bg($(this), 0, 10)},
function() {return animate_bg($(this), 10, 0)}
);
Ответ 3
$(selector)
.css({backgroundColor:"#f00"})
.animate({backgroundColor:"transparent"}, 2000, null,
function() { this.style.backgroundColor='transparent'; });
Не так чисто, потому что он превращает bg в белый, прежде чем сделать его прозрачным, но это вариант.
Ответ 4
Я использовал ответ Linus, но столкнулся с 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)}
);
Ответ 5
Вы можете использовать цвет rgba (61, 31, 17, 0,5), где 0.5 - непрозрачность. Затем, если вы хотите, чтобы прозрачный задал непрозрачность 0.0
$('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
Ответ 6
Я немного изменил код Shog9, чтобы соответствовать моим потребностям. Это похоже на jQuery UI Highlight, только он не исчезает в белый цвет. Это не идеально, но он работает на большинстве элементов.
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); })
);
}); }
Ответ 7
Я использовал параметр функции для удаления стиля после анимации:
$('[orgID=' + orgID + 'bg]').animate({ backgroundColor: "white" }, 300, "linear", function()
{
$('[orgID=' + orgID + 'bg]').css('background-color', '');
});
Он отлично работал.
Ответ 8
Использовать плагин jQuery Color: https://github.com/jquery/jquery-color
Он будет корректно работать как с трансляцией, так и с анимацией rgba.
Ответ 9
Вам нужно связать это.
Например, вы не можете сделать это:
$('#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);
Ответ 10
Используйте переход CSS:
$('smth').css('transition','background-color 1s').css('background-color','transparent')
или
$('h1').css({'transition':'background-color 1s','background-color':'red'})
Ответ 11
Моим решением было оживить цвет, видимый пользователем (т.е. цвет родительского элемента), а затем установить исходный цвет (который может быть или не быть "прозрачным" ) после завершения анимации
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;
}
Ответ 12
Используйте background вместо backgroundColor:
$('#myDiv').animate({background: "transparent"});