hi i have some problem on jquery code . this code fade up on scroll i use number counter values in this code
countswing = 0;
tiles = $("div .newstats").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b)
{
$(this).fadeTo(2000,1);
if(countswing<1)
{
jQuery({someValue: 0}).animate({someValue: 700}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats1').text(Math.ceil(this.someValue) + "+");
}
});
jQuery({someValue: 0}).animate({someValue: 500}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats2').text(Math.ceil(this.someValue) + "+");
}
});
jQuery({someValue: 0}).animate({someValue: 1000}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#stats3').text(Math.ceil(this.someValue) + "+");
}
});
countswing++;
}
}
});
});
but my problem is when i scroll download or scroll up number count not stop its number count again and again i want when i scroll download browser its fade up show then number count only one time when its number count complete then not its count again and again
i also use countswing variable of value 0 for stop counter . like you see in code but its not work it its show same problem .
please tell me how to do only count one time?
Related
Good morning all,
I have an animated number counter that counts up from 0 to the specified number. However if I enter a decimal number (i.e. 99.99%) it rounds up to 100%. Is there a way to make it count up to the number that is given?
Please let me know if you need more information.
Thanks in advance!
numbersAnimate(_Panel) {
if (!_Panel) {
return;
}
// Get document language
const _Document = document.documentElement;
let lang = _Document.getAttribute('lang');
// Grab all panel amount nodes
const _PanelAmounts = _Panel.querySelectorAll('.panel__amount');
if (!_PanelAmounts) {
return;
}
//Loop over all the panel amounts
for (const _PanelAmount of _PanelAmounts) {
//Convert to jQuery object
const $PanelAmount = $(_PanelAmount);
//Panel amount stored in value
const value = $PanelAmount.data('amount');
//If there is no value return
if (!value || value.length < 1) {
return;
}
// If not a number return
if (isNaN(value)) {
return;
}
//Animation....
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(this.Counter.toFixed());
}
});
}
//Add animated class because scroll event checks if it's there, if it isn't then add it.
_Panel.classList.add('animated');
//JSON Structure
"statistic": {
"amount": "99.99",
"symbol": "%"
},
<span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span>
You are using Math.ceil(now) which will round to the nearest integer. Have you tried removing it?
$PanelAmount.text(now).toLocaleString(lang);
Old:
//Panel amount is the animated number
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(Math.ceil(now)).toLocaleString(lang);
}
});
New:
function startCounter(){
$('.PanelAmount').each(function (index) {
var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(parseFloat(now).toFixed(size));
}
});
});
}
startCounter();
.PanelAmount {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="counter">99.99</div>
New JQuery works to the exact decimal point
I am currently building a website and want to fade several words at certain interval and certain fading time with infinite loop. This is exactly what I'm trying to achieve:
I've come up with this but don't know how to extend the time each word is displayed independently of fading time, so that it looks like on gif.
var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
jQuery(elem).fadeTo(1400, 0, function() {
this.innerHTML = text[counter];
counter = ++counter % text.length;
jQuery(this).fadeTo(1400, 1, change)
})
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>
You can use jQuery.delay to pause the code for a certain number of milliseconds before moving to the next one:
var timeOnEachText = 2000; // Milliseconds to spend on each before moving to next
var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
jQuery(elem).delay(timeOnEachText).fadeTo(1400, 0, function() {
this.innerHTML = text[counter];
counter = ++counter % text.length;
jQuery(this).fadeTo(1400, 1, change)
})
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>
If you just want to change the interval, you could convert your text array to an array-object and add some values to it, like this:
var text = [
{
text: 'fade1',
fadeIn: 1000,
fadeOut: 500,
timeout: 100,
},
{
text: 'fade2',
fadeIn: 1100,
fadeOut: 1500,
timeout: 1000,
},
{
text: 'fade3',
fadeIn: 500,
fadeOut: 300,
timeout: 3000,
}
];
var counter = 0;
var fadeTimeout = 0;
var elem = document.getElementById("fade");
function change() {
var currentTextItem = text[counter];
setTimeout( () => {
jQuery(elem).fadeTo(currentTextItem.fadeIn, 0, function() {
this.innerHTML = currentTextItem.text;
counter = ++counter % text.length;
jQuery(this).fadeTo(currentTextItem.fadeOut, 1, change)
});
// Set new timeout because in this set up the next item
// controls the timeout of the previous one.
fadeTimeout = currentTextItem.timeout;
}, fadeTimeout );
}
change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade">initial text</span></p>
I don't know if it'll work for you but have you thought about using #keyframes and just hiding showing the images at different intervals? If you know what the data is before hand and the number of images, you can set up key frames and it'll display much nicer.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
SO I found this jquery function: http://codepen.io/niklas-r/pen/HsjEv
html:
<p id="el">0%</p>
<button id="startCount">Count</button>
JS:
$("#startCount").on("click", function (evt) {
var $el = $("#el"),
value = 56.4;
evt.preventDefault();
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
It increment numbers with animation. It doesnt work though, when I replace click with document.ready(). How do I make it work?
on document.ready there is no event so you can't do evt.preventDefault().
Here is a working example on document ready:
$(function() {
var $el = $("#el"),value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="el">0%</p>
Try using like this,
$(document).ready(function(){
$(document).on("click", "#startCount", function (evt) {
var $el = $("#el"),
value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
});
Include all of your code in $(document).ready to prevent script execution before page loading
$(document).ready(function(){
$("#startCount").on("click", function (evt) {
...
});
});
To activate on ready and on button click:
var cnt = function() {
var $el = $("#el"),value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
};
$(cnt);
$("#startCount").on("click", cnt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="el">0%</p>
<button id="startCount">Count</button>
I'm trying to create div boxes step by step and animate them for several times when a button is pressed. I have a running code, and everything is going well. It goes right to the endhost, then it goes left again to its original place. This is mainly what I do, and also the demo is found here: http://jsfiddle.net/54hqm/3/
Now I want to happen after each click, is basically to move each DIV one after another, with a delay, instead of moving the whole stack of DIVs at once. I don't exactly know what to do. Can anyone help me with that?
$(document).ready(function () {
var count = 0;
var items = 0;
var packetNumber = 0;
var speed = 0;
$("button").click(function () {
if (count < 4) {
items = items + 1;
count++;
} else {
items = items * 2;
}
speed = $("#speed").val();
createDivs(items);
animateDivs();
});
function createDivs(divs) {
packetNumber = 1;
var left = 60;
for (var i = 0; i < divs; i++) {
var div = $("<div class='t'></div>");
div.appendTo(".packets");
$("<font class='span'>" + packetNumber + "</font>").appendTo(div);
packetNumber++;
div.css("left",left+"px");
div.hide();
left += 20;
}
}
function animateDivs() {
$(".t").each(function () {
var packet = $(this);
packet.show();
packet.animate({
left: '+=230px'
}, speed);
packet.animate({
left: '+=230px'
}, speed);
packet.animate({
top: '+=20px',
backgroundColor: "#f09090",
text: '12'
}, speed / 4, "swing", function () {
$('.span').fadeOut(100, function () {
$(this).text(function () {
return 'a' + $(this).text().replace('a', '');
}).fadeIn(100);
});
});
packet.delay(1000).animate({left:'-=230px'}, speed);
packet.animate({left:'-=230px'}, speed);
}).promise().done(function(){
$(".packets").empty();});
}
});
You can make this with 2 small modifications:
In your each() function, add the index parameter to know the index of the currently animating packet:
$(".t").each(function (index) {
Before your animate calls, insert a packet.delay() with a delay increasing with every item:
packet.delay(index * 250);
I updated your fiddle to show results.
Update: I made a second version based on your comment.
I wanted to get rid of a slider-plugin, so i tried to build my own,
everything works nice but i´m stuck to stop the whole thing on hover and restart it again on mouseleave,
here is my js :
function startPslider(val) {
if (!val) {
val = 0;
}
var holder = 'slideHolder';
var text = 'slideText';
startInterval(holder, text, val);
}
function startInterval(holder, text, val) {
var t;
var i = val;
if (i > 2) {
i = 0
}
$('#' + holder + i).animate({
opacity: 1,
}, function () {
$(this).addClass('active')
$('.' + text + i).animate({
opacity: 1,
left: 0
}, 1200);
t = setTimeout(function () {
$('.' + text + i).animate({
opacity: 0,
left: '-400px'
}, 1200);
$('#' + holder + i).animate({
opacity: 0,
}, 2200).removeClass('active');
startPslider(i + 1);
}, 4000)
});
// Here´s the not working hover-function
$('#hpCanvas').hover(function () {
clearTimeout(t);
}, function () {
var id = $('.active').attr('id');
var slide = id.substring(11, 22);
console.log(slide)
startPslider(slide);
});
}
$(function () {
startPslider();
});
tryed to solve this with adding class 'active' to the current holder and at hover-out try to catch the current-slide number (val) and restart it again, starting on the correct slide, but it´s not working as I wish,
have a look at this fiddle, http://jsfiddle.net/zDh76/ you will find html and css there, as you see everything works fine as long you do not hover.
Maybe anyone has a helping hint how to stop the animation, clear the timer and go on with the correct slide on mouseleave?
UPDATE
i separated start and end-interval
function startPslider(i) {
if(!i){
i=0;
}
if(i >2){
i=0
}
console.log('started Slider with slide:'+i)
var holder = 'slideHolder';
var text = 'slideText';
startInterval(holder, text, i);
}
function startInterval(holder,text,i) {
var t;
var v;
console.log('started Interval with slide:'+i);
$('#'+holder+i).animate({
opacity:1,
}, function(){
$('.'+text+i).animate({
opacity:1,
left:0
},1200);
t= setTimeout(function(){endInterval(holder,text,i); },4000);
});
}
function endInterval(holder,text,i,cont){
console.log('end Interval with slide:'+i);
$('.'+text+i).animate({
opacity:0,
left:'-400px'
},1200);
$('#'+holder+i).animate({
opacity:0,
},2200, function(){
$('.slideHolder').css('opacity',0);
i = i+1;
startPslider(i);
});
}
I found it out myself,
i needed to unbind the hover event on #hpCanvas inside the mouseleave function like
$('#hpCanvas').hover(function(){
$('.slideHolder, .slideText').stop(true,true);
clearTimeout(t)
},function(){
endInterval(holder,text,i);
$('#hpCanvas').unbind('mouseenter mouseleave')
})
as the next call to bind it with hover event is inside the mouseleave-part of the first hover event.
thanks anyway for everyone reading this