I am making a slideshow. This slides are all div's with content inside of them. Right now i have a function which adds a class to the next item in a container. I call that function with: setInterval("slideSwitch()", 10000) It works but all the slides have the same duration. What i want is that for example one slides shows 10 seconds and the following shows 15 seconds. Is there any way to set a duration per slide? Or should i use a javascript/jquery plugin?
The best approach to accomplishing a sliding timer is to use a recursive function call that sets a timeout and calls the same action. I have created a fiddle, but I will post the code here for clarity. You can go in and play with the code to see how it works. Here's the link to the fiddle.
function slideshow(action, time, index, max) {
setTimeout(function() {
action.call(this, index, max);
if (index === 0) {
slideshow(action, slideshow.duration.min, index + 1, max);
} else if (index < max) {
slideshow(action, slideshow.duration.max, index + 1, max);
} else {
slideshow(action, slideshow.duration.max, 0, max);
}
}, time);
}
slideshow.duration = {
min: 1000,
max: 2000
};
slideshow.slideSpeed = 'fast';
$(function() {
var slides = $('.slides .square');
slideshow(function(idx, max) {
switch (idx) {
case 0:
slides.eq(max).fadeOut(slideshow.slideSpeed, function() {
slides.eq(idx).fadeIn(slideshow.slideSpeed);
});
break;
case 1:
slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
slides.eq(idx).fadeIn(slideshow.slideSpeed);
});
break;
case 2:
slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
slides.eq(idx).fadeIn(slideshow.slideSpeed);
});
break;
case 3:
slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
slides.eq(idx).fadeIn(slideshow.slideSpeed);
});
break;
}
}, slideshow.duration.min, 0, 3);
});
Let me know if you need further assistance with this.
Related
I'm doing a little mini-game and I need to do some animations (like frames per second), so far I manage to do this on my own:
var loadCount = 0;
var ticks = 15;
function loadingLoop() {
loadCount++;
}
switch (loadCount) {
case 1:
$("#img").attr("src", "src/images/cenario/img004.png");
break;
case 2:
$("#img").attr("src", "src/images/cenario/img005.png");
break;
case 3:
$("#img").attr("src", "src/images/cenario/img006.png");
break;
// etc.... //
}
setInterval(function(){
if (loadCount >= 6 && loadCount <= ticks){
loadingLoop();
if (loadCount === ticks) {
clearInterval();
}
console.log(loadCount);
}
}, 500);
So I would like to know if there is a better way to do this.
Because the numbering of your images is so clearly linked to the loadCount you could cut down the lines of code needed. Instead of having to spell out each instance in a switch you could simply have something like this:
$("#img").attr("src", "src/images/cenario/img" + (loadCount+3).toString().padStart(3, '0') + ".png");
padStart takes a string which represents a number and pads it at the start with a character, in this case we've asked for 0s to be put at the front. The 3 indicates that we want 3 digits.
The other thing I noticed in your timing function is that you do not save your setInterval, but you try to clear it. Depending on what you are trying to do you probably need something like:
let interval = setInterval(function(){
if (loadCount >= 6 && loadCount <= ticks){
loadingLoop();
if (loadCount === ticks) {
clearInterval(interval);
}
console.log(loadCount);
}
}, 500);
What I am looking to do is have a number start counting either up or down, lets say from 1 to a 100 or a 100 to 1. I have found many many plugins that do this but they all have a duration variable. The problem is that duration variable applies to how long it takes to get from start to finish. I am looking for a way to set how long it takes to get to the next digit. IE counting from X to Y and updating the number every .25 seconds. This way a larger number would take longer to get to than a smaller number.
This plugin looks great but I can't get it to do what I want.
https://github.com/mhuggins/jquery-countTo
Any help would be great.
Please try this and let me know if that's what you want:
function countTo(min, max, interval, callback) {
var counter = min;
var i = setInterval(function() {
callback(counter);
counter++;
if(counter> max) return clearInterval(i);
}, interval*1000);
};
countTo(0, 100, 0.25, function(counter) {
$("#counter").text(counter);
});
countTo(0, 100, 0.01, function(counter) {
$("#counter2").text(counter);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="counter"> </div>
<div id="counter2"> </div>
You can try something like this
function count(target, start, end, step, timeInterval) {
var timer = setInterval(function() {
if (start == end) {
clearInterval(timer);
return false;
}
start += step;
target.html(start);
}, timeInterval);
}
count($('#timer1'), 1, 100, 1, 50);
count($('#timer2'), 100, 1, -1, 50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="timer1"></div>
<div id="timer2"></div>
So I have used this counter to count to a specific number :
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
jQuery(function($) {
$('.timer').countTo({
from: 50,
to: 2500,
speed: 5000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
http://jsfiddle.net/YWn9t/
But unfortunately there are no separators (dots) between every third numbers.
To sum up: How to make the output of the script from e.g. 1000000 to 1.000.000?
I recommend using numberFormatter.
console.log(new Intl.NumberFormat().format(123456));
I'm using meteor-keybindings and the following code:
Meteor.Keybindings.add({
'plus' : function () { zoome.value -= -(zoome.value-90); },
'-' : function () { zoome.value -= 10; },
'*' : function () { zoome.value = 100; }
});
I had to write the above code for a solid solution around this misty bug...
Scenario:
I have a range element with min value of 100 and max value of 500 to zoom a page.
the zoome.value += 10 jumps right up to 500, what's behind the scene?
The minus and reset functions work well...
$("#team").css("background-color","blue");
I'd like to turn the background colour of id:team to blue however I would only like to turn it this colour for 4 seconds.
How do I do this?
I've Googled around but I couldn't find anything regarding changing css for a given time frame.
Also, a fading out/in from/to the previous settings would be a nice touch.
If you want it to only appear blue for 4 seconds you could do:
var element = $( "#team" );
var oldColor = element.css( "background-color" );
element.animate( { "background-color": "blue" } )
.delay( 4000 )
.animate( { "background-color": oldColor } );
You need jQuery UI to .animate(), otherwise you can just use .css().
You have to use the timer feature:
setTimeout(function() {
$('#team').css('background-color', 'whatever');
}, 4000);
The second argument is a count in milliseconds of how long you'd like to wait before the first argument (a function) is called.
There's no built-in ability to say "go back to what it was before"; you'll have to remember the old value in your own code.
If you do not want to use the jQuery UI plugin (perhaps due to its size) then you could do the animating manually.
See the following code working in a jsFiddle.
function animblue(selector, from, to, step) {
var
target = $('#target'),
color = from,
next;
next = function () {
var hex = (Math.floor(color) < 16 ? '0' : '') + Math.floor(color).toString(16);
target.css('background-color', '#' + hex + hex + 'ff');
color += step;
if (!((color < from && color < to) || (color > from && color > to))) {
setTimeout(next, 10);
}
};
next();
}
$('#action').on('click', function () {
animblue('#target', 255, 0, -255 / 16);
window.setTimeout(function () {
animblue('#target', 0, 255, 255 / 16);
}, 4000);
});