Измените цвет фона тега span с помощью jQuery

Question

Я пытаюсь уменьшить цвет фона тега span с помощью jQuery, чтобы подчеркнуть, когда произошло изменение.Я думал, что код будет выглядеть примерно следующим образом внутри обработчика кликов, но, похоже, я не могу заставить его работать.Ты можешь показать мне, где я пошел не так?Спасибо, Расс.

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

---

Это лучше, но теперь исчезает как цвет фона тега span, так и текстовое значение тега span.Я пытаюсь просто убрать цвет фона и оставить текст видимым.Можно ли это сделать?

Answer 1

О, я не осознавал, что ты хочешь потускнеть цвет!Хорошо, вам нужно проверить плагин цвета 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

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

Answer 2

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

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

Answer 3

Если использование чистого 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.
}

Answer 4

Это можно сделать с помощью 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/

Answer 5

Попробуй это

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

Answer 6

Возможно, с ответом будет поздно, но это прямое решение вашего вопроса.

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

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

Answer 7

Я не хотел использовать плагин, поэтому, чтобы исчезнуть фон и включил это для класса 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);

Это раскрасит фон светло -серый, а затем исчезнет к цвету оригинала, я надеюсь, что это способствует

Answer 8

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

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

как указал Мишак.другой способ может быть примерно таким:

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

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

Answer 9

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

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

Answer 10

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

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

Answer 11

Вот как я исправил это для своего списка с помощью наведения:

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

Answer 12

Другое решение без jQuery пользовательский интерфейс 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/