JQuery

Question

के साथ एक स्पैन टैग के पृष्ठभूमि रंग को फीका करें I JQuery का उपयोग करके एक स्पैन टैग के पृष्ठभूमि-रंग को फीका करने की कोशिश कर रहा हूं ताकि परिवर्तन होने पर जोर दिया जा सके। मैं सोच रहा था कि कोड क्लिक हैंडलर के अंदर निम्न की तरह कुछ होगा, लेकिन मुझे लगता है कि यह काम नहीं कर रहा है। क्या आप मुझे दिखा सकते हैं कि मैं गलत कहां गया? धन्यवाद Russ।

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

---

बेहतर है कि, लेकिन अब यह स्पैन टैग के दोनों पृष्ठभूमि रंग और भी स्पैन टैग का पाठ मूल्य fades। मैं सिर्फ पृष्ठभूमि रंग को फीका करने की कोशिश कर रहा हूं और पाठ को दृश्यमान छोड़ देता हूं। क्या यह किया जा सकता है?

Answer 1

ओएच, मुझे नहीं पता था कि आप रंग को फीका करना चाहते हैं! ठीक है, ताकि आप jQuery रंग प्लगइन की जाँच करने की जरूरत है:

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

मैं:

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

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

और यहाँ jQuery डॉक्स साइट का एक और सहायक खंड है मैंने कभी ऐसा नहीं किया है इसलिए मैं आपको कोड देने की कोशिश नहीं करूंगा, लेकिन मुझे लगता है कि कलर प्लगइन आपको कार्यक्षमता देगा जरुरत।

Answer 2

आप इस वाक्य रचना का उपयोग करना चाहेंगे:

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

Answer 3

यह color animation plugin के साथ किया जा सकता है। इसके बाद आप

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

Answer 4

यही कारण है कि आप स्पैन टैग पर fadeOut कहते हैं। पृष्ठभूमि फीड एनीमेशन प्राप्त करने के लिए आपको इसका उपयोग करना चाहिए:

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

मिशक द्वारा इंगित किया गया। एक और तरीका कुछ इस तरह हो सकता है:

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

ऊपर कोड 50% पूरे स्पैन टैग करने के लिए Fadeout करेंगे, तब पृष्ठभूमि और fadein बदल जाता है। ऐसा नहीं है कि आप क्या देख रहे थे, लेकिन अन्य jQuery प्लग इन से निर्भर करता है बिना एक decet एनीमेशन बनाता है;)

Answer 5

इस

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

Answer 6

नवीनतम jQuery यूआई व्यापार आप पृष्ठभूमि रंग पर बदल करने की अनुमति देता का प्रयास करें ज्यादातर वस्तुओं। यहाँ देखें: http://jqueryui.com/demos/animate/

पुरुष एक छवि प्रकट करने के लिए यह एक सामान्य jQuery छवि रोल-ओवर वाले लोगों स्विच करने के लिए उपयोग की तरह है जैसे कि यह निर्माण करने के लिए आसान हो जाएगा रोल-ओवर पर पारदर्शी पृष्ठभूमि बनाने के बारे में पूछने के लिए के रूप में नौसेना छवियों?

Answer 7

यदि पृष्ठभूमि को फीका करने के लिए शुद्ध जेक्यू का उपयोग प्लगइन के बिना काम नहीं करता है, तो CSS3 के साथ ऐसा करने के लिए एक चालाक (हालांकि प्रगतिशील रूप से बढ़ाया नहीं गया) तरीका है।

यह फ़ंक्शन सीएसएस के माध्यम से किसी दिए गए तत्व को "संक्रमण" विशेषता लागू करेगा, इसके बाद तत्व को पृष्ठभूमि रंग दिया जाता है जो सीएसएस में फीका होता है।

यदि आप इसे एक लहर की तरह होना चाहते हैं ("यहां देखो!"), आधे सेकेंड की देरी के बाद, तत्व को वापस सफेद पर बदलने के लिए कतारबद्ध किया जाता है।

अनिवार्य रूप से जेक्यू तत्व को केवल एक रंग पर तत्व को ब्लिंक करता है, फिर सफेद पर वापस जाता है। 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 (या किसी भी lib) & साथ किया जा सकता एक सरल सीएसएस हैक:

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

Answer 10

यह मैं इसे कैसे एक हॉवर के साथ मेरी सूची के लिए निर्धारित है:

सीएसएस:

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 यूआई 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/