Затухайте фоновый цвет тега span с помощью JQuery

Ответ 1

OH, я не понимал, что ты хотел угаснуть цвет! Итак, вам нужно проверить плагин jQuery color:

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

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

И вот еще один полезный раздел сайта docs jQuery:

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

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

Ответ 2

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

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

Ответ 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.
}

Ответ 4

Это можно сделать с помощью jQuery (или любого lib) и простого 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);

Легкий Peasy! См. Это в действии: http://jsfiddle.net/matthewbj/jcSYp/

Ответ 5

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

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

Ответ 6

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

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

Simple. Не требуется плагин jqueryUI, сторонние инструменты и все.

Ответ 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);

При этом цвет фона станет серым, а затем исчезнет до цвета оригинала Я надеюсь, что это поможет

Ответ 8

что вы вызываете 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;)

Ответ 9

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

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

Ответ 10

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

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

Ответ 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'); });
});

Ответ 12

Другое решение без jQuery UI fooobar.com/info/212662/...

//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/