Убрать фоновый цвет тега span с помощью JQuery

Ой, я не понимал, что ты хочешь поблекнуть! Хорошо, поэтому вам нужно проверить плагин цвета jQuery:

http://plugins.jquery.com/project/color

https://github.com/jquery/jquery-color/

А вот еще один полезный раздел сайта документации jQuery:

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

На самом деле я никогда не делал этого, поэтому я не буду пытаться давать вам код, но я полагаю, что плагин цвета предоставит вам необходимую функциональность.

Это можно сделать с помощью плагина цветной анимации. Затем вы сделали бы что-то вроде

$('span').animate({'backgroundColor' : '#ffff99'});

Если использование чистого jQ для затухания фона не работает без плагина, есть умный (хотя и не прогрессивно улучшенный) способ сделать это с помощью CSS3.

Эта функция применяет атрибут «переход» к заданному элементу через CSS. Далее элемент получает цвет фона, который плавно переходит в CSS.

Если вы хотите, чтобы это было похоже на волну («смотри сюда!»), После задержки в полсекунды в очередь ставится функция, чтобы вернуть элемент обратно в белый цвет.

По сути, jQ просто мигает элемент одним цветом, а затем снова белым. CSS3 позаботится о выцветании.

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

Это можно сделать с помощью jQuery (или любой другой библиотеки) и простого CSS-хака:

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML:

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

Затем все, что вам нужно сделать, это:

$("#fadeout-div").fadeOut(1100);

Очень просто! Посмотрите на это в действии: http://jsfiddle.net/matthewbj/jcSYp/

Попробуй это

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

Может быть, поздно ответить, но однозначный ответ на ваш вопрос.

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

Простой. Нет необходимости в плагине jqueryUI, сторонних инструментах и ​​всем остальном.

Я не хотел использовать плагин, поэтому для постепенного появления и исчезновения фона я включил это для класса div, чтобы его фон исчез.

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

jquery, который находится в нажатии кнопки

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

Это окрасит фон в светло-серый цвет, а затем вернется к исходному цвету. Надеюсь, это поможет.

вот почему вы вызываете fadeOut в теге span. чтобы получить анимацию затухания фона, вы должны использовать:

$('span').animate({'backgroundColor' : '#ffff99'});

как указал mishac. по-другому может быть что-то вроде этого:

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

приведенный выше код исчезнет до 50% всего тега span, затем изменит фон и fadeIn. это не то, что вы искали, но создает анимацию decet, не зависящую от других плагинов jquery;)

Новейший бизнес-интерфейс jQuery UI позволяет выполнять преобразования цвета фона для большинства объектов. См. Здесь: http://jqueryui.com/demos/animate/

Что касается парня, который спрашивает о том, чтобы сделать фон прозрачным при наведении курсора, чтобы отобразить изображение, не было бы проще построить его как обычный перекручиваемый образ jQuery, как те, которые люди используют для переключения изображений навигации?

Вы захотите использовать этот синтаксис:

$("span").fadeOut("slow").css("background-color", "#FFFF99");

Вот как я исправил это для своего списка при наведении курсора:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

Другое решение без jQuery UI https://stackoverflow.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Демо: http://jsfiddle.net/5NB3s/3/