jQuery और सीएसएस संक्रमण के साथ पल्सेट प्रभाव

Question

मैं एक प्रभाव प्राप्त करने की कोशिश कर रहा हूं जिसमें एक स्थिति मुझे होने पर पृष्ठभूमि रंग पंप किया जाता है। तो मेरे पास है:

<div class="box">...</div> 

.box { 
    background-color: #fff; 
    transition: background-color 0.5s ease-out; 
} 
.box.active { 
    background-color: #ccc; 
} 

तो अब मैं jQuery का उपयोग करने के जोड़ सकते हैं और उस वर्ग को दो बार और निकालने के लिए एक पृष्ठभूमि रंग pulsating प्रभाव पैदा करना चाहते हैं। कुछ ऐसा:

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active'); 

सिद्धांत रूप में, यह स्पंदन प्रभाव को बनाना चाहिए लेकिन ऐसा नहीं है। क्या होता है कि 'सक्रिय' वर्ग जोड़ा जाता है और इसे कभी भी हटाया या जोड़ा नहीं जाता है। यह लगभग पहले 'removeClass' की तरह ट्रिगर नहीं किया गया है।

मुझे कुछ याद आ रहा है, लेकिन यह सुनिश्चित नहीं है कि क्या। शायद यह सीएसएस संक्रमण समय के साथ कुछ करने के लिए है, लेकिन वे एक दूसरे से स्वतंत्र होना चाहिए, है ना?

किसी भी विचार के लिए धन्यवाद।

Answer 1

विलंब केवल एनिमेशन के साथ काम करता है, कक्षाओं को जोड़ने और हटाने नहीं। इसके अलावा, आप सीएसएस में कीफ्रेम का उपयोग करके पल्सेट कर सकते हैं:

@keyframes pulse { 
    50% { background-color: #ccc } 
} 

.box { 
    animation: pulse .5s ease-out 2; 
} 

Answer 2

मुझे लगता है कि यह वही है जो आपको चाहिए, एक ऐसा फ़ंक्शन जो प्रत्येक एक्स सेकंड को स्वयं कॉल करता है और एक सीएसएस संपत्ति बदलता है, see live demo।

var state = true; 
function changeColor() { 
    state = !state; 
    if(state){ 
     $("div").css("background","red"); 
    }else{ 
     $("div").css("background","blue"); 
    } 
    setTimeout(function() { 
     changeColor(); 
    }, 1000); 
} 

changeColor(); 

Answer 3

CSS3 एनीमेशन के साथ इस प्रभाव को प्राप्त करने का प्रयास करें।

@-webkit-keyframes pulsate 
{ 
     0% {background-color: #fff;} 
     50% {background: #ccc;} 
     100% {background: #fff;} 
} 

फिर box तत्व

.box{ 
    animation: pulsate 2s infinite; 
} 

http://jsfiddle.net/taltmann/jaQmz/

Answer 4

delay समारोह वास्तव में केवल एनिमेशन के लिए प्रयोग किया जाता है मुख्य-फ़्रेम लागू होते हैं। कक्षा को जोड़ना और निकालना एक एनीमेशन नहीं है, लेकिन आप जो चाहते हैं उसे प्राप्त करने के लिए queue विधि या setTimeout फ़ंक्शन का उपयोग कर सकते हैं।

इस प्रश्न में thread पर बहुत अच्छे उत्तरों हैं जो आपके लिए एक दिलचस्प पढ़ सकते हैं।

Answer 5

मूल रूप से आप इसे हमेशा के लिए धड़कना आप setInterval() का उपयोग करना चाहिए मैं यहाँ http://jsfiddle.net/UftRT/

function pulssate() { 
if ($('.box').hasClass('active')) { 
    $('.box').removeClass('active') 
} else { 
    $('.box').addClass('active') 
} 
} 
window.setInterval(function() { pulssate(); },1000); 

आप के लिए एक उदाहरण की स्थापना की है, तो आप यह सिर्फ एक चर में अंतराल सेट तो फोन बंद करना चाहते हैं चाहते हैं window.clearInterval (int), इस int = window.setInterval(function() { pulssate(); },1000);