http://jsfiddle.net/doktormolle/dNXVx/
How can I make this animate automatically?
I'm new to all this so any help is much appreciated!
function fx(o)
{
var $o=$(o);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('position','relative');
$('span',$o).stop().css({position:'relative',
opacity:0,
fontSize:84,
top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
}).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}
I think you want the animate function to be called without click.. if that is the case you can call the function directly or use a timer for an effect. See below,
Change the span like below,
<span id="animateMe">click here</span>
And this script below the fx inside document ready,
Direct Call:
$(function() {
fx('#animateMe');
});
Timer (after 2 secs)
$(function() {
setTimeout(function () {
fx('#animateMe');
}, 2000); //2000 milli seconds = 2 secs
});
http://jsfiddle.net/dNXVx/483/
Related
There is a variable I want to update every minute.
So am curious whether there is a way in Javascript where I can refresh the whole script after some time instead of the variable itself.
<script>
function vName(){
videos = $('#videos').text();
}
vName();
Use setInterval. Here hello will print each and every 3sec
setInterval(function(){ console.log("Hello"); }, 3000);
You could achive this using an event to listen to the element's change:
(function () {
"use strict";
let videos = '';
$("#videos").on("change", evt => {
videos = $(evt.target).val();
console.log(videos);
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="videos" type="text">
Solution
Set interval is a function which is being used to perform any functionality after a specific desired time span . The function is always called again and again after that time period . The below code is an example for setInterval.
Code:-
setInterval(function(){ alert("Video is here "); }, 9000);
Explanation
you can call any method in place of "alert("Video is here")" and the desired time period is being given in place of "9000" that means the specific function is being called after every 9 seconds
You can put your code in setInterval() function, like this
setInterval(()=>{
//your script here
function vName(){
videos = $('#videos').text();
}
vName();
}, 60000);
I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.
I've tried a few different ways except the right one.
Trying this:
setTimeout( function() {
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
});
}).eq(0).trigger('showText');
}, 4000);
Will wait for 4 seconds, then fade each paragraph in, one after another at the speed of .800 miliseconds.
What I want to do is fade a paragraph in at .800 ms, then wait for 4 seconds before the next paragraph fades in.
The basic set-up of:
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
alert('pause here');
});
}).eq(0).trigger('showText');
works but I've yet to hit the right syntax to make it pause where the alert is.
I tried throwing a call to a function but I don't need to run anything except just to wait.
So in pseudo code, I'm trying to define something like:
function wait() {
pause(for 4 seconds);
}
Then I could just call that function instead of the alert above. My issues with setTimeout has been 'having' to define a function but I'm over thinking something.
Using setTimeout was correct, but you applied it in the wrong place.
$('.historyTextBoxes p').bind('showText',function(e) {
$(this).fadeIn(800,function(){
// this is the callback after the fadein
// here we want to wait (use a timeout)
var next = $(this).next();
if (next.length)
setTimeout(function() {
// before the next text is shown
next.trigger("showText");
}, 4000);
})
}).eq(0).trigger('showText');
This should do it:
function showAll() {
var p = $('.historyTextBoxes p').get(); // array of elements
(function loop() {
if (p.length) {
var el = p.shift();
$(el).fadeIn(800).delay(4000).promise().done(loop);
}
})();
}
demo at http://jsfiddle.net/4dNr3/2/
Note that this uses no explicit timers at all, and nor does it use any events to trigger the next phase - it relies on the animation queue for all timing. Note that it's not generally a good idea to mix timers and animation unless you can guarantee that they're interleaved rather than running in parallel. In this case that's OK, though.
Hey all I have a quick javascript question! Frustrated trying to get it sorted.... right now my modal div shows after 10 seconds which is right, but I want to only show it ONCE per session. Here's my current code:
<script type="text/javascript">
$(function() { // wait for the DOM
setTimeout(function () {
var $modal = $('#free-awesome'); // your selector; cache it; only query the DOM once!
$modal.modal('show'); // show modal; this happens after 10 seconds
setTimeout(function () {
$modal.modal('hide'); // hide modal;
}, 50000);
}, 10000);
});
</script>
Any ideas how I can adapt that javascript to show once per visit/session?
I'm quite new to javascript so if you could let me know exactly what to swap the above out for that'd be great!
Thanks in advance
You can use the session storage:
if(!sessionStorage.hidemodal) {
// your code ...
sessionStorage.hidemodal = true;
}
I am trying to alternate between two logos every 5 seconds using the following code:
window.setInterval(
function () {
//breakpoint 1
$("#logo").toggle(
function() {
//breakpoint 2
$(this).attr('src', '/Images/logo1.png');
},
function() {
//breakpoint 3
$(this).attr('src', '/Images/logo2.png');
}
);
},
5000
);
I can get a simple toggle to work, but when I introduce the toggle within window.setInterval(), the toggle's two handlers won't fire.
I set breakpoints on the lines directly beneath the comments in the code above. Breakpoint 1 hits every 5 seconds. However, Breakpoint 2 and 3 never hit.
Why are neither of the toggle function's handlers firing?
toggle() needs to be clicked as far as I know....
So,
$("#logo").toggle(
function() {
//breakpoint 2
$(this).attr('src', '/Images/logo1.png');
},
function() {
//breakpoint 3
$(this).attr('src', '/Images/logo2.png');
}
);
window.setInterval(
function () {
$("#logo").trigger('click');
},
5000
);
Sounds like jQuery doesn't finds the #logo element.
How does the HTML markup look like?
You can try this to see if jQuery finds the #logo element:
//Firebug way
console.log($('#logo').length)
//alert way
alert($('#logo').length)
..fredrik