I am trying to write a page where it loads several objects in an timed order using JavaScript. I've managed to make objects blink using CSS3, but not quite sure how to combine it with timer in JavaScript.
here is my code:
<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
$("#blinkfirst").setOpacity(0);
$("#blinkfirst").setStyle({visibility: 'visible'});
new Effect.Opacity(
"#blinkfirst", {
from: 0.0,
to: 1.0,
duration: 1.0
}
);
}
function appear(){
t=setTimeout('blink()', 8);
}
});
</script>
my logic is to write one function to change the opacity of a div from 0.0 to 1.0, so it will show up. and then write another function to call this function after every certain seconds for different objects. for example, make div1 appears first, and 8 seconds later, div2 appears; 8 seconds later, div3 appears...
Seems like a lot of code to fade things in. This would probably simplify things. Add the class "blink" to each element you want to apply, and an additional class of 'load-0', etc to specify order.
$('.blink').fadeTo(0,0).each(function(i) {//initial fadeout, then blink loop
var bk = $(this);//can i get a blink?
if ($('.load-0').length) { bk = $('.load-'+i); }//load ordering support
bk.delay(i*2000).animate({opacity: '1'}, 1000);//animate [delay,opacity,duration]
});
That will hide them at first, then fade them in 2 seconds apart from each other.
made a fiddle: http://jsfiddle.net/filever10/nw8kM/
For the blink effect, you can simply wrap the element with setInterval function and call fadeIn/fadeOut of jQuery on it.
setInterval(function(){
$('.blink').fadeIn(500).fadeOut(500);
}, 0);
Here is the demo in JSFiddle.
UPDATE 1:
Here is the pure JavaScript solution.
var blink = document.getElementById('blink');
var timer = setInterval(function(){
if(blink.style.display == 'none') {
blink.style.display = 'block';
} else {
blink.style.display = 'none';
}
}, 500);
Using display CSS property to hide/show the element.
Check out the working fiddle here.
UPDATE 2:
And here is the fixed solution using jQuery's animate() function.
var timer = setInterval(function(){
$blink.stop().animate({
opacity: 1
}, 500, function() {
$blink.animate({
opacity: 0
}, 500);
});
$blink.text($blink.queue( "fx" ).length);
}, 1000);
Check out the working fiddle here.
Use the following code-
<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
$("#blinkfirst").setStyle({opacity: '0'});
$("#blinkfirst").setStyle({visibility: 'visible'});
new Effect.Opacity(
"#blinkfirst", {
from: 0.0,
to: 1.0,
duration: 1.0
}
);
}
function appear(){
t=setTimeout('blink()', 8000);
}
});
</script>
Related
Disclamer: This is probably a dumb question as I'm new to Javascript and even newer to jQuery. Sorry if there are any coding "faux pas" or if you get dizzy reading what I've done :)
I am working on a page to simply be a kiosk on a raspberry pi to display missionary letters at my church on a video screen. So far, I have made a slide show for the letters using old-fashioned Javascript and animated a 3D globe using three.js. It all seems to be working well except I want to fade the letters in and out.
So far, I have changed the image opacity between missionaries by
document.getElementById("letter").style="opacity:100%;
or
document.getElementById("letter").style="opacity:0%;
However, I am wanting the image to fade instead of appearing or disappearing suddenly. I am even more new to jQuery than I am to Javascript, but is there a way to simply implement jQuery's fadeIn() and fadeOut() without having to rewrite everything I've done to this point?
A more detailed inclusion of this section of my javascript is listed below. Thanks so much in advance for any advice you've got!
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,timePerLetter);
function nextSlide() {
currentSlide = (currentSlide+1)%misInfo.length;
locationCorrection (misInfo[currentSlide][4], misInfo[currentSlide][5]);
translate(newX, newY);
//the two lines above are related to rotating the globe I rendered with three.js
letterGone ();
setTimeout (missionaryletterdisplay, 750);
}
function letterGone () {
document.getElementById("letter").style="opacity:0%;";
}
function missionaryletterdisplay () {
document.getElementById("letter").src="letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg";
setTimeout (fadeInLetter, 200);
var letterloctester = Math.pow(-1, currentSlide);
var letterrightleft = "right";
if (letterloctester >=0) {
letterrightleft="right";
} else {
var letterrightleft="left";
}
function fadeInLetter() {
document.getElementById("letter").style="opacity:100%;"+letterrightleft+":7.5%;";
};
setTimeout (fadeInLetter, 50);
}
//The whole "rightleft" stuff above moves the letter to either the right side of the screen or the left depending on i so that the letter and globe switch between missionaries.
Yes you can simply use JQuery's fadeIn() and fadeOut() like below:
function letterGone () {
$("#letter").fadeOut();
}
function missionaryletterdisplay () {
$("#letter")attr("src", "letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg");
var letterloctester = Math.pow(-1, currentSlide);
var letterrightleft = "right";
if (letterloctester >=0) {
var letterrightleft="right";
} else {
var letterrightleft="left";
};
$("#letter").css(letterrightleft,"7.5%");
$("#letter").fadeIn();
}
Thanks #darkmatter. That did it! I basically decided to give up on using jQuery and used a CSS transition instead. Specifically, this got me there...https://stackoverflow.com/a/18760338/12706569.
I ended up putting the following in my css:
#letter {
z-index:2;
width:35%;
height:90%;
position: absolute;
top:5%;
opacity:1;
transition: opacity 0.5s;
}
#letter.fade {
opacity:0;
}
and I put this in my javascript (with some cleaning up as well):
function missionaryletterdisplay () {
var letterloctester = Math.pow(-1, currentSlide);
var letterrightleftbefore;
var letterrightleftafter;
var letterNow = document.getElementById("letter")
if (letterloctester >=0) {var letterrightleftbefore="right";var letterrightleftafter="left"; } else {var letterrightleftbefore="left";letterrightleftafter="right";};
function letterGone() {
letterNow.style=letterrightleftafter+":7.5%;";
letterNow.classList.toggle('fade');
}
letterGone ();
function letterThere () {
letterNow.src="letters/"+misInfo[currentSlide][0]+""+misInfo[currentSlide][2]+".jpg";
setTimeout (fadeInLetter, 200);
function fadeInLetter() {
letterNow.style=letterrightleftbefore+":7.5%;";};
letterNow.classList.toggle('fade');
setTimeout (fadeInLetter, 50);}
setTimeout (letterThere, 750);
}
I'm kind of new to jQuery and I'm currently trying the following:
I'm using animate.css to animate a div. What I want to do now is to define a timing between fading in and fading out. For example:
Fade in > 3 sec delay > fade out
I'm using this function to dynamically add classes from animate.css to my object (#test).
$(document).ready(function () {
phase1('#test', 'bounceInLeft');
function phase1(element, animation) {
element = $(element);
element.addClass('animated ' + animation);
};
});
I'm trying to archive something like this:
phase1('#test', 'bounceInLeft');
3 sec delay
phase1('#test', 'bounceOutLeft');
1 sec delay
phase1('#test2', 'bounceInLeft');
.....
Any kind of help is really appreciated :) Thanks in advance!
Yes you setTimeout. Wrap your code within this section and adjust the timing with the amount of milliseconds that you want. This allows you to stagger code timings with multiple values..
This example will delay by three seconds, then one by five seconds..
setTimeout(function(){
// place your code in here
}, 3000);
setTimeout(function(){
// place your second bit of code in here
}, 5000);
Since you are using jQuery, you can use animation chains like that
(function($){
$(".move")
.animate({left:"+=200"},3000)
.delay()
.animate({left:"+=100"},3000);
})(jQuery);
See Example
Using jQuery chain events
$("#id").fadeIn(1000).delay(3000).fadeOut(1000);
This should work for you. All parameters specify time 1000=1Sec
http://jsfiddle.net/k8zq2fo6/
You can increase the chain
$("#id").fadeIn(1000).delay(3000).fadeOut(1000).delay(2000).fadeIn(1000).delay(3000).fadeOut(1000).delay(2000);
Try utilizing .queue()
$(function() {
// load `Animate.css`
$("style").load("https://raw.githubusercontent.com/"
+ "daneden/animate.css/master/animate.css");
// animation settings
var settings = [{
"bounceInLeft": 3000
}, {
"bounceOutLeft": 1000
}, {
"bounceInLeft": 3000
}];
$("#test").queue("bounce", $.map(settings, function(val, key) {
return function(next) {
var current = Object.keys(val)[0];
$(this)
// reset `className`
.attr("class", "")
// add `animated` , `current` `class`
.addClass("animated " + current);
// log `.queue("bounce")` iteration
console.log(this.className, current
, settings[key][current], $(this).queue("bounce"));
// "delay": `settings[key][current]` ,
// call `next` function in `.queue("bounce")`
setTimeout(next, settings[key][current]);
}
}))
.dequeue("bounce")
// do stuff when `.queue("bounce")` empty
.promise("bounce")
.then(function(elem) {
console.log(elem.queue("bounce"), "complete")
})
});
#test {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">abc</div>
<style></style>
http://api.jquery.com/fadeOut/ <- fadeOut api
I'm trying to learn Javascript and I've been playing with a snippet I found on Codepen.
I'm having trouble trying to get the random text array snippet to have the text fadeOut when it transitions away to another text object. Right now, the array cycles through and randomly selects a string from the array using the Math.Random function (5*1) and it fades in each time a new text object loads in, however I want it to fade out and I don't think I'm utilizing the .fadeOut property properly. How can I get it so that the text fadesOut, so the text does fadeIn fadeOut, instead of fadeIn, insta kill?
var textTimer;
var inTransition = false;
startTimer();
function startTimer() {
clearTimeout(textTimer);
textTimer = setTimeout(changeTitle, 3500);
}
changeTitle();
var titleNumber = Math.floor(Math.random() * 5) + 1;
function changeTitle() {
var titleArray = [
"Test1",
"Test2",
"Test3",
"Test4",
"Test5"
];
var tempTitleLength = titleArray.length - 1;
if (inTransition == false) {
inTransition = true;
titleNumber++;
if (titleNumber > tempTitleLength){
titleNumber = 0
}
$('.text').html('');
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);
$('.text').fadeOut();
$('.text').stop().delay(0).animate({
opacity: 1
}, 1500, function() {
inTransition = false;
startTimer.()
});
}
}
Thanks! :D
The HTML is pretty straight forward
<div class="text"></div>
Multiple problems:
$('.text').html('');
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);
You are already removing the text in html('') without fading out,
setting css opacity to 0 without any delay, setting html new text without any animation.
There is a syntax error also startTimer.() I guess is typo.
Remove first 2 lines and set new text after fade out is done.
You also need to wait for fadeOut to finish before doing fadeIn.
So, sequence: fadeOut, set new text, fadeIn.
Like this:
$('.text').fadeOut(1500, function () {
$('.text').html(titleArray[titleNumber]);
$('.text').fadeIn(1500, function () {
inTransition = false;
startTimer()
});
});
JSFiddle: http://jsfiddle.net/Dzyzw/
You have syntax errors in your code: you have startTimer.() should be startTimer() and you did not close your startTimer function with a }. I corrected this for you and set up a sample JSFiddle for you review. Seems to be working otherwise.
Here is the sample JSFiddle: CLICK HERE
Here's what I think you're going for--
Set initial text.
Fade out your text.
Change the text.
Fade in the new text.
Wait a while, then return to step 2.
I would drop all the transition flags and use the optional callback functions that are fired when fadeOut and fadeIn complete to move from step to step, e.g.
$('.text').fadeOut(1000, function() {
$('.text').html(get_next_word());
$('.text').fadeIn(500);
});
Just fire that off on a timer that is 1500 milliseconds + the time you want the text to be fully visible.
I have a jsfiddle for this
Jsfiddle
The problem is, I am trying to create a script that ones a button is clicked flashes an image (car lights) on and off for a period of time. It works fine, but in IE8 since the lights are png the animation for it is causing a black background and border as it blinks on and off. So I trying to duplicate the same thing, but without using animation.
In my jsfiddle, the first function for the first click div represents what i am trying to do without animation, but it is not repeating. The code:
$('.oneD').click(function(){
for (var i = 0; i <= 9; i++) {
$('.oneP').show();
setTimeout(function(){
$('.oneP').hide();
}, 1000);
}
});
The 2nd function is the one I already created that does work, but it has the animation:
$('.twoD').click(function(){
for (var i = 0; i <= 9; i++) {
$(".twoP").fadeIn(1000, function () {
$(".twoP").hide();
});
}
});
Keep in mind that the jsfiddle is just a simple mock not using images. I am just looking for the functionality in which i can incorporate this. I appreciate your time in helping me with this.
instead of setTimeout() use setInterval() and clearInterval() like this:
$('.oneD').click(function(){
$('.oneP').show();
var interval = setInterval(function(){
$('.oneP').hide();
}, 1000);
//*after a number of time or loop
interval.clearInterval();
});
setInterval() "Loop" throught the function it is given every number of millisecond you pass it. and clearInterval() stop the "Loop".
I'd do it like this :
$('.oneD, .twoD').on('click', function(){
for (var i=0; i<9; i++)
$('.'+this.className.replace('D', 'P')).delay(1000).show(0)
.delay(1000).hide(0);
});
FIDDLE
This uses a selector for both elements and the same event handler, then swaps out the D for a P in the showing and hiding.
As for using delay() and making this work, hide() and show() will work just as the animated jQuery methods if a value for the duration is passed, even if that value is zero.
Fiddle here: http://jsfiddle.net/HxFpr/
var i;
$('.twoD').click(function(){
i = 0;
loopFlash();
});
function loopFlash(){
if(i < 10){ // flash 5 times (1 on 1 off = 2 cycles)
$('.twoP').toggle();
var flashing = setTimeout(loopFlash,500);
}
i++;
}
Yet another solution for you.
No Animation - with single interval
With animation - pure jQuery
http://jsfiddle.net/x6Kpv/6/
var noAnimationHandler = function() {
setInterval(function() {
var $el = $('.oneP');
$el[$el.is(":visible") ? "hide" : "show"]();
}, 800);
};
var animationHanddler = function() {
$('.twoP').fadeIn(300, function() {
$(this).delay(150).fadeOut(300, animationHanddler);
});
}
$('.oneD').click(noAnimationHandler);
$('.twoD').click(animationHanddler);
Thanks
For example I have a function called showcontainer. When I click on a button activating it, I want a certain div element, in this case <div id="container">, to fade in. And when I click it again, fade out.
How do I achieve this?
Note: I am not accustomed with jQuery.
So you got a bunch of jQuery answers. That's fine, I tend to use jQuery for this kind of stuff too. But doing that in plain JavaScript is not hard, it's just a lot more verbose:
var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');
btn.onclick = function() {
// Fade out
if(container.style.display != 'none') {
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity -= 5;
container.style.opacity = opacity/100;
if(opacity <= 0) {
clearInterval(fade);
container.style.opacity = 0;
container.style.display = 'none';
}
}, 50);
// Fade in
} else {
container.style.display = 'block';
container.style.opacity = 0;
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity += 5;
container.style.opacity = opacity/100;
if(opacity >= 100) {
clearInterval(fade);
container.style.opacity = 1;
}
}, 50);
}
};
Check the working demo.
Provided you're not opposed to using jQuery per se, you can achieve this easily:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showcontainer').click(function() {
$('#container').fadeToggle();
});
});
</script>
...
<div id="container">
...
</div>
...
<input type="button" id="showcontainer" value="Show/hide"/>
...
Note the missing http: in the beginning of the source of jQuery. With this trick the browser will automatically use http: or https: based on whether the original page is secure.
The piece of code after including jQuery assigns the handler to the button.
Best thing you could do is start now and get accustomed to jQuery.
The page http://api.jquery.com/fadeIn/ has all the example code that could be written here. Basically you want to have the call to fadeIn in your showcontainer function.
function showcontainer() {
$('#container').fadeIn();
}
You can have a look at jQuery UI Toggle.
The documentation turns the use of the library very simple, and they have many code examples.
You'd be as well off learning jQuery as it makes it a lot easier to do things!
From the sounds of it, you could have the container div already in the HTML but with a style of "display:none;", and then simply show it in your click event using (jQuery):
$('#container').fadeIn('slow', function() {
//Any additional logic after it's visible can go here
});