Как я анимирую цвет фона к прозрачному в jQuery?

Question

Как я анимирую цвет фона к прозрачному в jQuery?

Я нашел приложение Chrome «Advanced REST Client» превосходным для работы с службами REST. Вы можете установить Content-Type на application/json среди прочего: Расширенный клиент REST

40

jquery jquery-ui transparent

задан jonstjohn 20 March 2009 в 05:09

4 ответа

Другие вопросы по тегам:

jquery jquery-ui transparent

Пример:

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

<час>

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

score 1 · Answer 2

Я немного изменил код 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); })

      );
}); }

score 8 · Answer 3

Согласно Стивенсу Расширенное программирование в среде UNIX , глава 13, это процедура для создания хорошо работающего демона Unix:

Разветвляется и имеет родительский выход . Это заставляет оболочку или сценарий загрузки думать, что команда выполнена. Кроме того, гарантируется, что дочерний процесс не будет лидером группы процессов (предварительное условие для setsid next)
Вызов setsid для создания нового сеанса. Это делает три вещи:
1. Процесс становится лидером сеанса нового сеанса
2. Процесс становится лидером группы процессов для новой группы процессов
3. Процесс не имеет управляющего терминала
Необязательно снова выполнить ответвление и иметь родительский выход. Это гарантирует, что демон не является лидером сеанса и не может получить управляющий терминал (в SVR4).
Измените текущий рабочий каталог на / , чтобы не мешать монтированию и размонтированию
Установить режим файла маска создания на 000, чтобы в дальнейшем разрешить создание файлов с любыми необходимыми разрешениями.
Закройте ненужные файловые дескрипторы, унаследованные от родителя (в любом случае управляющего терминала нет): stdout , stderr , и stdin .

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

score 11 · Answer 4

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

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

Как я анимирую цвет фона к прозрачному в jQuery?

4 ответа

Пример:

Похожие вопросы: