Helllo i am getting problem with blinking every 0.5 seconds. I start my code with #blink display= "inline" but it always stays inline. When starting my code, i call startBlinking.
function startBlinking() {
setInterval(function () {
blink();
}, 1000);
}
function blink() {
setTimeout(function () {
document.getElementById('blink').style.display = "none";
}, 500);
setTimeout(function () {
document.getElementById('blink').style.display = "inline";
}, 500);
}
Can you help me? Thanks.
The problem with your attemt is that you're setting the same timeout length for both hiding and showing the element, meaning it will hide and show again at the same time! Remove one and it should work:
function startBlinking() {
setInterval(function () {
blink();
}, 1000);
}
function blink() {
// note no timeout for the hiding part
document.getElementById('blink').style.display = "none";
setTimeout(function () {
document.getElementById('blink').style.display = "inline";
}, 500);
}
startBlinking();
<div id="blink">blink</div>
<p>some text following</p>
As you can tell, this causes the following content to jump. We are also fetching the element every time we're hiding or showing it. Better to swap to using visibility and make the function a bit more flexible:
function blink(element, time) {
// using visibility: hidden; instead of display: none;
// allows the element to keep its rendering space
element.style.visibility = "hidden";
setTimeout(function () {
element.style.visibility = "visible";
}, time);
setTimeout(function () {
blink(element, time); // recurse
}, time * 2);
}
// query the DOM for element once instead of every iteration
blink(document.getElementById("blink"), 500);
<div id="blink">blink</div>
<p>following content stays put</p>
You might also want to be able to stop the blinking at some point
function blink(element, time) {
function loop(){
element.style.visibility = "hidden";
setTimeout(function () {
element.style.visibility = "visible";
}, time);
timer = setTimeout(function () {
loop();
}, time * 2);
cleared = false;
}
var timer, cleared = true;
// expose methods
return {
start: function() {
if (cleared) loop();
},
stop: function() {
clearTimeout(timer);
cleared = true;
}
};
}
var blinking = blink(document.getElementById("blink"), 500);
document.getElementById("start").addEventListener("click", function(){
blinking.start();
});
document.getElementById("stop").addEventListener("click", function(){
blinking.stop();
});
<div id="blink">blink div</div>
<button id="start">start blinking</button><br />
<button id="stop">stop blinking</button>
you can make it simple by toggling a class
.hide{
display:none;
}
setInterval(function () {
$('.blink').toggleClass('hide')
}, 500);
JS Fiddle
Just call it once, setTimeout() is ripping it out of the thread so it gets set right back to inline.
function blink() {
setTimeout(function () {
if (document.getElementById('blink').style.display === 'inline') {
document.getElementById('blink').style.display = "none";
} else {
document.getElementById('blink').style.display = "inline";
}
}, 500);
}
you have messed up the event que of javascript, why dont you try this
function startBlinking() {
initial = 'inline';
index = 0;
setInterval(function () {
if(index==2){
initial = (initial=='none')?'block':'none';
document.getElementById('blink').style.display = initial;
index=0;
}
index++;
}, 1000);
}
For the jQuery fans:
you can use the 'pulsate' effect
http://jqueryui.com/effect/
This may or may not achieve the exact blinking you need but it's a lot simpler!
Related
I want to show one line per second in javascript, but it is not working...
https://jsfiddle.net/d9a784ta/
function showIt1() {
document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
document.getElementById("div3").style.visibility = "visible";
}
window.onload = function() {
setTimeout("showIt1()", 1000);
setTimeout("showIt2()", 2000);
setTimeout("showIt3()", 3000);
}
You could use display property with block value, because it overwrites the initial display: none.
For using setTimeout, you could insert the reference to the function, without using strings and supply the parameter for the id and use only one function.
function showIt(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function() {
setTimeout(showIt, 1000, 'div1');
setTimeout(showIt, 2000, 'div2');
setTimeout(showIt, 3000, 'div3');
};
#div1, #div2, #div3 { display: none; }
<div id="div1"><h1>1 line</h1></div>
<div id="div2"><h1>2 line</h1></div>
<div id="div3"><h1>3 line</h1></div>
You need to reference the function directly, not with a string:
function showIt1() {
document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
document.getElementById("div3").style.visibility = "visible";
}
window.onload = function() {
setTimeout(showIt1, 1000);
setTimeout(showIt2, 2000);
setTimeout(showIt3, 3000);
}
In setTimeout, you provide first argument as string. It should be a name of function, like this:
setTimeout(showIt1, 1000);
So, it all would look like:
function showIt1() {
document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
document.getElementById("div3").style.visibility = "visible";
}
window.onload = function() {
setTimeout(showIt1, 1000);
setTimeout(showIt2, 2000);
setTimeout(showIt3, 3000);
}
setTimeout() accepts Function as it's first parameter. When you create a function called showIt1, then when you for example write to the console something like this:
console.log(showIt1)
It will output: "Function". So that's why you are also allowed to call setTimeout() like this:
setTimeout(function() {
document.getElementById("div1").style.visibility = "visible";
}, 1000);
A few things:
1) changed document.getElementById for JQquery $("#id")
2) added quotes on your <div> ids
3) using .css() function:
HTML:
<div id="div1"><h1>1 line</h1></div>
<div id="div2"><h1>2 line</h1></div>
<div id="div3"><h1>3 line</h1></div>
JS:
function showIt1() {
$("#div1").css('display','block');
}
function showIt2() {
$("#div2").css('display','block');
}
function showIt3() {
$("#div3").css('display','block');
}
window.onload = function() {
console.log('onload');
setTimeout("showIt1()", 1000);
setTimeout("showIt2()", 2000);
setTimeout("showIt3()", 3000);
}
JSFiddle:https://jsfiddle.net/dudu84/d9a784ta/2/
I'm trying to change the color of a paragraph every second. I'm using the following function:
var ChangeColorGreen = function(){ $('#contact-title p').css('color', '#5fc091'); return true; }
var ChangeColorBlack = function(){ $('#contact-title p').css('color', '#000'); return true; }
setTimeout(function() {
ChangeColorGreen();
setInterval(function() {
ChangeColorBlack();
}, 2000);
}, 2000);
This is my HTML:
<div id="contact-title">
<p>Coming Soon</p>
</div>
But single-color changes paragraph once. No color changes again.
You can add 2 classes black & green and toggle between them every second using setInterval function and JQuery toggleClass function.
setInterval(function() {
$('#contact-title p').toggleClass('black green')
}, 1000);
.black{
color: #000;
}
.green{
color: #5fc091;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contact-title">
<p>Coming Soon</p>
</div>
Hope this helps.
You can set 2 intervals, each firing every 2 seconds but delay the 2nd one by 1 second.
setInterval(function() {
ChangeColorGreen();
}, 2000);
setTimeout(function() {
setInterval(function() {
ChangeColorBlack();
}, 2000);
}, 1000);
Better still you can set 1 interval but use a flag, or some other way to determine which color should be next.
var nextColor = "green";
setInterval(function() {
if (nextColor == "green") {
ChangeColorGreen();
nextColor = "black";
} else {
ChangeColorBlack();
nextColor = "green";
}
}, 1000);
You can create a unique function, and create a flag to change it to one color or another:
function changeColor(t) {
document.querySelector('#contact-title > p').style.color = t ? '#000' : '#5fc091';
setTimeout(function() {
changeColor(!t);
}, 2000);
}
changeColor(true);
<div id="contact-title">
<p>Coming Soon</p>
</div>
use a single function and a flag variable and have the following:
var isGreen = false;
function toggleColor(){
if(isGreen){isGreen = false; ChangeColorBlack();}
else{isGreen = true; ChangeColorGreen();}
}
and call it via a setInterval as such
setInterval(function() {
toggleColor();
}, 2000);
I am facing one problem in JS, please help me to resolve this.. I have two methods they are simultaneously executing one after other.. I have to stop them after second click on image.
Below is my JS code
I am calling fadeIn(img1, img2, img3) after first click on image then some animation will be goes on, once I click second time the whole animation(method execution) should be stopped.
var t1 = 0;
var t2 = 0;
function fadeIn(img1, img2, img3) {
$(imgIdForClick_1).addClass('animated pulse');
$('#cashBar1').addClass('animated pulse');
$('#cashBarDec1').addClass('animated pulse');
var t1 = setTimeout(function() {
fadeOut(img1, img2, img3);
if (clickCount_1 >= 2) {
alert("clicked 1");
return false;
}
}, 500);
//t1 = setTimeout(fadeOut, 500);
};
function fadeOut(img11, img22, img33) {
$(imgIdForClick_1).removeClass('animated pulse');
$('#cashBar1').removeClass('animated pulse');
$('#cashBarDec1').removeClass('animated pulse');
var t2 = setTimeout(function() {
fadeIn(img11, img22, img33);
if (clickCount_1 >= 2) {
alert("clicked 2");
return false;
}
}, 500);
//t2 = setTimeout(fadeIn, 500);
};
By below code I am calling this snippet in first click
imgId1 = $('#img1');
imgId2 = $('#cashBar1');
imgId3 = $('#cashBarDec1');
fadeIn(imgId1, imgId2, imgId3);
After second click
clickCount_1 varibale will be 2
clearTimeout(t1);
clearTimeout(t2);
See the DEMO. Click on the image to stop animation.
I have added a flag that would be checked upon the call of the function, and if the value is true then and then only the functions would be called. The flag would be set to false when clicked on image, so the function would be called no longer.
code:
var animate = true;
function fadeIn() {
$('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
if(animate == true)
{
setTimeout(fadeOut,1000);
}
};
function fadeOut() {
$('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
if(animate == true)
{
setTimeout(fadeIn,1000);
}
};
fadeIn();
$('#image').click(function(){
animate = false;
alert('now the animation will stop');
});
What I'm trying to do is, when the page loads a box appears after 3 seconds and if nothing happens, it gets partially hidden after 3 seconds. Now if the cursor enters the box, timeout is cleared and the ad won't be getting hidden as I'm clearing the timeout.
The problem is when the mouse leaves and enters again, the previous timeout is still there. Though I'm trying to clear the timeout but it still hides the box. What can be the problem?
See my code: (JSfiddle link: http://jsfiddle.net/aK9nB/)
var pstimer;
$(document).ready(function(){
setTimeout(function(){
showps();
pstimer = setTimeout(function() {
hideps();
}, 3000);
}, 3000);
});
$('#psclose').on('click', function(){
$('#postsearch-container').hide();
});
$("#postsearch-container").hover(
function () {
console.log("enter");
clearTimeout(pstimer);
console.log("cleartimeout");
showps();
},
function () {
console.log("leave");
clearTimeout(pstimer);
var pstimer = setTimeout(function(){
hideps();
} , 3000);
});
function showps() {
$("#postsearch-container").stop();
$('#postsearch-container').animate({
bottom: '0'
}, 'slow');
}
function hideps() {
$('#postsearch-container').animate({
bottom: '-115'
}, 'slow');
}
$("#postsearch-container").hover(
function () {
console.log("enter");
clearTimeout(pstimer);
console.log("cleartimeout");
showps();
},
function () {
console.log("leave");
clearTimeout(pstimer);
pstimer = setTimeout(function(){ // remove the "var"
hideps();
} , 3000);
}
);
try removing the var in front of pstimer.
function () {
console.log("leave");
clearTimeout(pstimer);
/* var */ pstimer = setTimeout(function(){
hideps();
} , 3000);
}
using var defines a new local-variable that shares the name with your intended pstimer, but is only available within this function call. When the function is complete, the local var is destroyed.
I am trying to have an animation run only when the mouse is over an object. I can get one iteration of the animation and then have it set back to normal on mouse out. But I'd like the animation to loop on mouseover. How would I do it, using setInterval? I'm a little stuck.
It could be done like this:
$.fn.loopingAnimation = function(props, dur, eas)
{
if (this.data('loop') == true)
{
this.animate( props, dur, eas, function() {
if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas);
});
}
return this; // Don't break the chain
}
Now, you can do this:
$("div.animate").hover(function(){
$(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300);
}, function(){
$(this).data('loop', false);
// Now our animation will stop after fully completing its last cycle
});
If you wanted the animation immediately stop, you could change the hoverOut line to read:
$(this).data('loop', false).stop();
setInterval returns an id that can be passed to clearInterval to disable the timer.
You can write the following:
var timerId;
$(something).hover(
function() {
timerId = setInterval(function() { ... }, 100);
},
function() { clearInterval(timerId); }
);
I needed this to work for more then one object on the page so I modified a little Cletus's code :
var over = false;
$(function() {
$("#hovered-item").hover(function() {
$(this).css("position", "relative");
over = true;
swinger = this;
grow_anim();
}, function() {
over = false;
});
});
function grow_anim() {
if (over) {
$(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim);
}
}
function shrink_anim() {
$(swinger).animate({left: "0"}, 200, 'linear', grow_anim);
}
Consider:
<div id="anim">This is a test</div>
with:
#anim { padding: 15px; background: yellow; }
and:
var over = false;
$(function() {
$("#anim").hover(function() {
over = true;
grow_anim();
}, function() {
over = false;
});
});
function grow_anim() {
if (over) {
$("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim);
}
}
function shrink_anim() {
$("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim);
}
You can achieve this using timers too.