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>
Related
I am trying to create counter that increase by one each time as follow:
var imnum=0;
(function changeImage(){
++imnum;
$( ".slider" ).fadeOut( 5000, function() {
// Animation complete.
$('#home-slider-im').attr("src",images[imnum]);
$('#home-slider-t').attr("src", imagesText[imnum]);
$( ".slider" ).fadeIn( 2000, function() {
// Animation complete
});
console.log(imnum);
setTimeout(changeImage,10000)
})})();
but the console log output is 1 3 7 15... not 1 2 3 4... am I doing something wrong? what is it? how to fix it?
I'm guessing you have more than one element with class="slider". The fadeOut callback will get called for each element that fades out. So if you have (say) two, the first call to changeImage will trigger the callback twice...and things will rapidly accelerate from there. :-)
Since your fadeout is 5000ms and your fadein is 2000ms and your delay between images is 10000ms, just move the setTimeout outside the fadeOut callback:
var imnum = 0;
(function changeImage() {
++imnum;
$(".slider").fadeOut(5000, function() {
// Animation complete.
$('#home-slider-im').attr("src", images[imnum]);
$('#home-slider-t').attr("src", imagesText[imnum]);
// $(this).stop();
$(".slider").fadeIn(2000, function() {
// Animation complete
});
//alert(i);
// console.log(i);
});
// *** Outside the callback
console.log(imnum);
setTimeout(changeImage, 10000)
})();
(I've also updated that to have consistent curly brace notation and indentation, which aids tremendously with readability.)
Side note: You appear to be getting the image information from an array, but always increasing the imnum variable and not checking whether it wraps around. This trick may be useful:
imnum = (imnum + 1) % images.length;
That will wrap back to 0 when it gets to the end of the array.
Side note 2: You seem to have parallel arrays (images and imagesText). I'd suggest using a singel array of objects instead:
var images = [
{text: "text for the image 1", src: "http://example.com/img/1"},
{text: "text for the image 2", src: "http://example.com/img/2"},
{text: "text for the image 3", src: "http://example.com/img/3"}
];
then
$('#home-slider-im').attr("src", images[imnum].src);
$('#home-slider-t').attr("src", images[imnum].text);
Your callback is called for every matched element. Based on your output, it looks like you have two elements with class .slider, so it's calling setTimeout() twice every time the function is called. Instead, you could just have the timeout outside of the callback and wait for a little bit longer:
var imnum=0;
(function changeImage(){
++imnum;
$( ".slider" ).fadeOut( 5000, function() {
// Animation complete.
$('#home-slider-im').attr("src",images[imnum]);
$('#home-slider-t').attr("src", imagesText[imnum]);
// $(this).stop();
$( ".slider" ).fadeIn( 2000, function() {
// Animation complete
});
//alert(i);
// console.log(i);
});
setTimeout(changeImage,15000)
console.log(imnum);
})();
In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!
Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>
$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide
You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/
I'm trying to build a simple image slider (but using a fade effect). Every two seconds, the image should change to another image. At the end, it should call repeat_sponsor() again, to start over, so it becomes a loop.
I've written this (highly ineffective) code for 5 images. Turns out I'm going to need it for around 50 images. My editor just freezes when I add too much code.
I've tried using while-loops, but I just can't figure it out how to do this the right way.
Anyone who can help me with this?
function repeat_sponsor()
{
$("#sponsor2").hide();
$("#sponsor3").hide();
$("#sponsor4").hide();
$("#sponsor5").fadeOut("slow");
$("#sponsor1").fadeIn("slow", function() {
setTimeout(function(){$("#sponsor2").fadeIn("slow", function() {
setTimeout(function(){$("#sponsor3").fadeIn("slow", function() {
setTimeout(function(){$("#sponsor4").fadeIn("slow", function() {
setTimeout(function(){$("#sponsor5").fadeIn("slow", ...
(function (){
var cnt = 50; //set to the last one...
var max=50;
function show() {
$("#sponsor" + cnt).fadeOut("slow"); //if you want the fadeout to be done before showing next, put the following code in the complete callback
cnt++;
if(cnt>max) {
cnt=1;
}
$("#sponsor" + cnt).fadeIn("slow");
window.setTimeout(show, 2000);
}
show();
})();
But the real issue is the fact you are loading tons of images from the start. You will be better off changing it so you only have a small subset of images and change the source.
You should use some sort of for loop and a class for hiding the images. and add a max value that if checks out resets c & i
var i=0;
var c=1;
function repeat_sponsor()
{
$("#sponsor"+i).fadeOut("slow");
$(".sponsers").hide()
$("#sponsor"+c).fadeIn("slow", function() {
window.setTimeout(repeat_sponsor(), 3000);
}
i++;
c++;
}
Just run a function every two seconds with setInterval and appropriately target your different sponsor divs:
var i = 1;
var max = 50;
setInterval(function() {
// Could target all other sponsor images with a class "sponsor"
$('.sponsor').fadeOut();
// Execute code on the target
$("#sponsor" + i).fadeIn();
if (i === max) {
i = 0;
}
i++;
}, 2000);
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>
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.