Исчезать цвет фона тега span с помощью JQuery - PullRequest
Новая
       42

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

24 голосов
/ 09 апреля 2009

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

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

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

Ответы [ 12 ]

16 голосов
/ 09 апреля 2009

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

$('span').animate({'backgroundColor' : '#ffff99'});
10 голосов
/ 17 февраля 2012

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

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

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

9 голосов
/ 24 мая 2012

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

Easy Peasy! Смотрите это в действии: http://jsfiddle.net/matthewbj/jcSYp/

4 голосов
/ 13 августа 2010

Попробуйте это 

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);
3 голосов
/ 23 апреля 2012

Может быть поздно, чтобы ответить, но прямое решение для вашего ответа. 

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

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

2 голосов
/ 07 февраля 2014

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

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

1 голос
/ 07 января 2011

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

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

1 голос
/ 21 декабря 2009

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

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

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

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

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

0 голосов
/ 23 марта 2014

Другое решение без 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/

Страница:
...