बदल रहा फीका करने के लिए मैं कैसे छवियों फीका करने के लिए जब मैं इस कोड करना चाहते हैं:पृष्ठभूमि छवि
$("#large-img").css('background-image', 'url('+$img+')');
मैंने कई स्थानों में फीका डाल कोशिश की है।
धन्यवाद
यह शायद आप चाहते थे है
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
मैं समझता हूं कि आप कहां से आ रहे हैं लेकिन मैं पृष्ठभूमि को एक अलग तत्व पर बदल रहा हूं। मैं थंबनेल पर क्लिक करता हूं और फिर यह बड़ी छवि को थंबनेल – fadejquery
से छवि में बदल देता है ठीक है, मुझे यह काम मिल गया है लेकिन यह कभी-कभी लुप्तप्राय पर फंस जाता है और अंधेरा दिखाई देता है या यह छवियों के बीच कूदता/कट जाता है। उतना आसान नहीं है जितना कि मुझे – fadejquery
ठीक है, मैंने इसे फंसने के लिए ठीक कर दिया है। मैं इसे नई छवि को कैसे फीका कर सकता हूं साथ ही साथ अन्य छवि को लुप्त कर सकता हूं? – fadejquery
अस्पष्टता आपके उद्देश्य की सेवा करती है?
यदि हां, तो इस प्रयास करें: अपने backgound छवि फीका लेकिन अग्रभूमि पाठ छोड़ने के लिए कोशिश कर रहा है, तो
$('#elem').css('opacity','0.3')
मुझे लगता है कि जब तक मैं इसे रीसेट नहीं करता तब तक अस्पष्टता बनाए रखूंगा, मैं इसे किसी भी तरह से कोशिश करूंगा – fadejquery
/छवियों तुम पर एक नया div और स्थिति में पृष्ठभूमि छवि अलग करने के लिए यह सीएसएस इस्तेमाल कर सकते हैं पाठ/छवियों वाले div में पृष्ठभूमि div fade।
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
एक 1 सेकंड की देरी के साथ:
मुझे इसकी आवश्यकता नहीं है। मेरे पास थंबनेल छवियों का एक सेट है और जब मैं थंबनेल पर क्लिक करता हूं तो यह थंबनेल के href से बड़े आईएमजी को बदल देगा। मैं बड़ी छवि के इस बदलाव को फीका/आउट करना चाहता हूं। – fadejquery
ठीक है मैं देखता हूँ। मैंने कुछ समान http://leandrovieira.com/projects/jquery/lightbox/ के लिए लाइटबॉक्स एडिन का उपयोग किया है, लेकिन फिर मुझे नहीं लगता कि यह ठीक है कि आप क्या कर रहे हैं। सौभाग्य। – iandayman
यह मदद मिल सकती है
एचटीएमएल
<div id="textcontainer">
<span id="sometext">This is some information </span>
<div id="container">
</div>
</div>
सीएसएस
#textcontainer{
position:relative;
border:1px solid #000;
width :300px;
height:300px;
}
#container{
background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
width :100%;
height:100%;
}
#sometext{
position:absolute;
top:50%;
left:50%;
}
जे एस
$('#container').css('opacity','.1');
मैं एक वैकल्पिक समाधान की पेशकश कर सकते हैं?
मेरे पास यह वही समस्या थी, और फीका काम नहीं कर सका क्योंकि यह पूरे तत्व को फीका था, न केवल पृष्ठभूमि। मेरे मामले में तत्व शरीर था, इसलिए मैं केवल पृष्ठभूमि को फीका करना चाहता था।
इससे निपटने का एक शानदार तरीका तत्व को वर्गीकृत करना और पृष्ठभूमि के लिए CSS3 संक्रमण का उपयोग करना है।
transition: background 0.5s linear;
जब आप या तो toggleClass के साथ या अपने कोड के साथ पृष्ठभूमि बदलने के लिए,, $("#large-img").css('background-image', 'url('+$img+')'); यह के रूप में वर्ग द्वारा परिभाषित फीका करना होगा।
यह आपके लिए कैसे काम कर रहा है? मैंने सोचा था कि पृष्ठभूमि-छवियों को संक्रमित नहीं किया जा सका ... – ithil
वह एक सुरुचिपूर्ण soloution था, कष्टप्रद css3 बीजी छवि संक्रमण का समर्थन नहीं करता है, यहां एक वैकल्पिक सीएसएस विधि है: http://www.mightymeta.co.uk/fading-button- पृष्ठभूमि-छवियों के साथ-सीएसएस 3-संक्रमण/ – Alex
फ़ायरफ़ॉक्स पर काम नहीं कर रहा है: https://bugzilla.mozilla.org/show_bug.cgi?id=546052 – linuscl
बिल्डिंग ऊपर अनियंत्रित क्रिएटिव समूह के समाधान के, मैं jQuery उपयोग कर रहा था शरीर टैग की पृष्ठभूमि छवि बदलने के:
उदा
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});
मेरे पास एक जावास्क्रिप्ट टाइमर था जो दो बयानों के बीच स्विच किया गया था।
सभी मैं एक fadeOut बनाने के मुद्दे को हल करने के लिए करना था -> fadein प्रभाव उपयोग अनियंत्रित क्रिएटिव समूह के सुझाव था और अपने कोड को
transition: background 1.5s linear;
जोड़ें। अब यह खूबसूरती से और खूबसूरती से fades।
धन्यवाद के लिए धन्यवाद प्रचलित क्रिएटिव समूह और सूपएनी !!
यह एकमात्र उचित चीज थी जिसे मैंने पृष्ठभूमि छवि को फीका करने के लिए पाया था।
<div id="foo">
<!-- some content here -->
</div>
आपका सीएसएस; अब CSS3 transition के साथ बढ़ाया गया है।
#foo {
background-image: url(a.jpg);
transition: background 1s linear;
}
अब पृष्ठभूमि
document.getElementById("foo").style.backgroundImage = "url(b.jpg)";
Voilà बाहर स्वैप, यह fades!
स्पष्ट अस्वीकरण: आपके ब्राउज़र CSS3 के transition संपत्ति का समर्थन नहीं करता है, तो इस काम नहीं करेगा। इस मामले में, छवि एक संक्रमण के बिना बदल जाएगी। आपके उपयोगकर्ताओं के ब्राउज़र के <1% को दिए गए CSS3 का समर्थन नहीं करते हैं, यह शायद ठीक है। खुद को बच्चा मत करो, यह ठीक है।
सबसे अच्छा समाधान, मेरे पास बैकग्राउंड-रंग के संक्रमणों को जोड़कर बहुत सारे कोड थे, पृष्ठभूमि-छवि और अधिक संक्रमण बदल रहे थे ....यह समाधान इसे बेहतर और आसान बनाता है –
लेकिन मैं इसे एफएफ ¿में काम नहीं कर सकता? हालांकि मैं -मोज़-संक्रमण का उपयोग करता हूं, क्यों? –
किसी ने मुझे इस धागे की ओर इशारा किया क्योंकि मेरे पास यह वही मुद्दा था लेकिन यह मेरे लिए काम नहीं करता था। खोज के घंटों के बाद मुझे इसका उपयोग करके एक समाधान मिला - https://github.com/rewish/jquery-bgswitcher#readme
इसमें फीड के अलावा कुछ अन्य विकल्प भी हैं।
@ फेड .. आपका प्रश्न क्या है? क्या आप पूछ रहे हैं कि फीका कैसे करें या क्या आपने कोशिश की है कि उस कोड द्वारा छवियों को कैसे फीका जाए .. कृपया स्पष्ट रूप से उल्लेख करें। – Mihir
यदि '# big-img' में कोई सामग्री नहीं है, तो मेरा सुझाव है कि आप पूरे तत्व को मिटा दें, क्योंकि आप एक व्यक्तिगत पृष्ठभूमि छवि को फीका नहीं कर सकते हैं। –
@ मिहिर मैं पुरानी पृष्ठभूमि छवि को बाहर करने की कोशिश कर रहा हूं और नई पृष्ठभूमि छवि – fadejquery