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

Question

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

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

---

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

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

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

Answer 2

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

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

Answer 3

Это может быть сделано с color animation plugin. Тогда вы бы сделали что-то вроде

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

Answer 4

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

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

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

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

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

Answer 5

Попробуйте

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

Answer 6

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

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

Answer 7

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

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

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

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

Answer 9

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

Answer 10

Это, как я установил его для моего списка с висения:

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 11

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

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