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>
Related
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 2 years ago.
Improve this question
I want disable animation after user checked on checkbox, but I can't get it to work.
function onChangeTarget(num) {
updateCounter();
if (num != 0) {
targetHideAnimation = parseInt(num);
$('div.plus-point.plus-point' + num + '').css("display", "block");
$('div#wrap-' + num + ' img').css("filter", "grayscale(1)");
if (targetHideAnimation != 0) {
$('div#wrap-' + num + '').stop();
}
}
}
Here my full source code :
https://jsfiddle.net/ninhnguyen2208/o4htr5xj/
Please tell me what am I missing.
Looking at your fiddle, the issue isn't with the .stop(), it's with the .animate, specifically the callback:
function upDown() {
for (var i = 1; i <= QTY_TARGETS; i++) {
...
wrap.animate({ 'top': '' + moveTop + 'px' }, {
duration: duration,
complete: function () {
wrap.animate({ top: '' + moveTopRepeat + '' },
{
duration: duration,
// this line here
complete: upDown
});
}
});
}
}
The complete:upDown restarts upDown, but is called form within every target and calls the outer upDownAll.
Separate upDown to upDownAll and an inner upDownTarget then on the individual target complete reset just for that target:
function upDown() {
for (var i = 1; i <= QTY_TARGETS; i++) {
upDownTarget(i)
}
}
function upDownTarget(i)
{
...
wrap.animate({ 'top': '' + moveTop + 'px' }, {
duration: duration,
complete: function () {
wrap.animate({ top: '' + moveTopRepeat + '' },
{
duration: duration,
// only restart this one target
complete: function() { upDownTarget(i) }
});
}
});
}
Updated fiddle: https://jsfiddle.net/29hntbve/
As an extra, you also might like to stop the animations when the player loses:
res.text('You lose');
$(".wrap").stop();
I have a codepen which simply needs to have a counter where you count up pennies and pounds until the user clicks stop. The cost is calculated based on an hourly rate in the example (50).
Why am I getting strange issues whereby the counter resets at 3, when on animation complete I am updating the variable.
Any help would be very much appreciated, thanks.
http://codepen.io/matt3224/pen/QyydVB?editors=001
$(function(){
var doc = $(document),
rate = parseFloat(50 / 60 / 60).toFixed(4),
earned = rate,
paused = false;
doc.on('click', '.js-start', function(e){
e.preventDefault();
$(this).text('Stop').removeClass('js-start').addClass('js-stop js-start--stop');
setInterval(function(){
if(!paused){
var perSec = +earned + +rate;
$({someValue: earned}).animate({someValue: perSec}, {
duration: 1000,
step: function() {
$('.js-count').text('£' + parseFloat(this.someValue).toFixed(2));
},
complete: function() {
earned = parseFloat(+earned + +rate).toFixed(2);
}
});
}
}, 1000);
});
doc.on('click', '.js-stop', function(e){
e.preventDefault();
$(this).text('Start').removeClass('js-stop js-start--stop').addClass('js-start');
paused = true;
});
});
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?
I am using and have modified an image slider/carousel and need some guidance one two things. I need to enable it to auto scroll through the images firstly. and secondly I need to have three words underneath that act as controls too. So if I click on one it will take me to that image in the slider with some text underneath?
Example Fiddle
(function() {
var first = $('.item').first(),
last = $('.item').last(),
itemWidth = first.width(),
carousel = $('.carousel');
carousel.prepend(last.clone()).append(first.clone());
carousel.width(itemWidth * $('.item').length);
carousel.css({left: -itemWidth});
$('.prev').on('click', function(e){
e.preventDefault();
carousel.animate({left: '+=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left) < 2) {
carousel.css({left: -itemWidth * (carousel.children().length - 2)});
}
});
return false;
});
$('.next').on('click', function(e){
e.preventDefault();
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
carousel.css({left: -itemWidth});
}
});
return false;
});
})();
so the image illustrates my aim.
Easiest way:
Create variable var autoplay=true;,
Wrap Your function binded to next button click in setInterval, so setInterval Function would be like this one:
setInterval(function(){
if(!autoplay)return;
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
carousel.css({left: -itemWidth});
}
})
},1000)
and then just add autoPlay toggle handler
$('.autoplayControl').on('click',function(){
autoplay=!autoplay;
})
FIDDLE: http://jsfiddle.net/UWbrQ/197/
Since I hadn't seen the button for autoplay I thought of automatic solution.
In This fiddle the Gallery moves with automatic movement(ten second for image) when the user clicks on pre next buttons auto move stops to restart after 10 seconds of inactivity
For me this is a more elegant solution
<script type="text/javascript">
$(document).ready(function(){
var first = $('.item').first(),
last = $('.item').last(),
itemWidth = first.width(),
carousel = $('.carousel');
console.log(itemWidth)
carousel.prepend(last.clone()).append(first.clone());
carousel.width(itemWidth * $('.item').length);
carousel.css({left: -itemWidth});
//auto start
var giranews = setInterval(function(){move()},5000);
function move(){
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
carousel.css({left: -itemWidth});
}
});
};
function stopx(){
clearInterval(giranews);
};
function countdown(a) {
var count = a;
timerId = setInterval(function() {
count--;
console.log(count);
if(count == 0) {
clearInterval(timerId);
giranews = setInterval(function(){move()},5000);
};
}, 1000);
};
$('.prev').on('click', function(e){
e.preventDefault();
stopx();
if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
carousel.animate({left: '+=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left) < 2) {
carousel.css({left: -itemWidth * (carousel.children().length - 2)});
}
});
return false;
});
$('.next').on('click', function(e){
e.preventDefault();
stopx();
if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
carousel.css({left: -itemWidth});
}
});
return false;
});
})
</script>
The Easiest Way Demo Based On your Code with Just Addition of few Lines
Periodically Call the auto function
This function is basically the content inside your click for next slide
Wrap this inside the function and call it with your required interval
setInterval(Auto,5000);
function Auto(){
carousel.animate({left: '-=' + itemWidth}, 300, function(){
if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
carousel.css({left: -itemWidth});
}
});
}
Although the aim of this community is not provide complete script to other people, but provide solutions to specific problems, given my love for web galleries in this fiddle there is a gallery with caption below the image with buttons that move images
To accomplish this i had to change the script logic and code is increased slightly
If you like this solution don't forget to flag in green my answer ;) thanks
<script type="text/javascript">
$(document).ready(function(){
var first = $('.item').first(),
last = $('.item').last(),
itemWidth = first.width(),
countx=1,
carousel = $('.carousel');
console.log(carousel.position().left)
carousel.width(itemWidth * $('.item').length);
//auto start
var giranews = setInterval(function(){move()},5000);
function move(){
var left=carousel.position().left
if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{ carousel.animate({left: '-=' + itemWidth}, 300);}
if(countx===4){countx=1}else{countx++}
showCaption(countx)
};
function stopx(){
clearInterval(giranews);
};
function countdown(a) {
var count = a;
timerId = setInterval(function() {
count--;
console.log(count);
if(count == 0) {
clearInterval(timerId);
giranews = setInterval(function(){move()},5000);
};
}, 1000);
};
//show captions in caption div
function showCaption(countx){
var caption=$('li:eq('+(countx-1)+')').attr('data-caption')
$('#caption').text(caption)
}
showCaption(countx)
$('.prev').on('click', function(e){
e.preventDefault();
stopx();
if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
if(countx===1){countx=4}else{countx--}
showCaption(countx)
var left=carousel.position().left
if(left===0){carousel.animate({'left':(itemWidth*($('li.item').length-1)*-1)+'px'},300)}else{carousel.animate({left: '+=' + itemWidth}, 300);}
});
$('.next').on('click', function(e){
e.preventDefault();
stopx();
if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
if(countx===4){countx=1}else{countx++}
showCaption(countx)
var left=carousel.position().left
if(left<(itemWidth*($('li.item').length-2)*-1)){carousel.animate({'left':'0px'},300)}else{carousel.animate({left: '-=' + itemWidth}, 300);}
});
//insert buttons links to image
for(a=0;a<$('li.item').length;a++){
$('<a class="butt">'+(a+1)+'</a>').appendTo('div.buttons')
}
$('a.butt').click(function(e){
e.preventDefault();
stopx();
if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
var pos=carousel.position().left
carousel.animate({'left': (($(this).index()*itemWidth)*-1)+'px'})
showCaption($(this).index()+1)
countx=$(this).index()+1
})
})
</script>
I have a jQuery slider. I have two buttons i.e ZoomIn and ZoomOut. I want to slide the slider on these button click. Like by clicking ZoomIn it should slide towards right and by clicking ZoomOut it should slide towards left, and should call their respective slide function/event too.
Working Demo Here
$(document).ready(function () {
$("#zoomSlider").slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
}
});
$("#zoom").val($("#zoomSlider").slider("value") + "%");
});
Updated
I also need a function to be called when slider changes. That function take two parameters 1)event 2)ui, how to get those parameteters when button click ? like :
$('#zoomIn').on('click', function () {
if (counter < 4.00) {//if counter less than max value
counter += .1;//increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
myFunction(event, ui);
}
});
Please try this:
$(document).ready(function(){
$("#zoomIn").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position = (parseFloat(current)+0.1) ;
$("#zoom").val( new_position +"%");
$("#zoomSlider").slider('value',new_position);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
$("#zoomOut").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position_out = (parseFloat(current)-0.1) ;
$("#zoom").val( new_position_out +"%");
$("#zoomSlider").slider('value',new_position_out);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
});
Demo
Try
$(document).ready(function () {
var counter = 0, //initialize counter
$slider = $("#zoomSlider");
$slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
counter = ui.value; //change counter value if user slides
}
});
$("#zoom").val($slider.slider("value") + "%");
counter = $slider.slider("value"); // set slider value in counter
$('#zoomIn').on('click', function () {
if (counter < 4.00) { //if counter less than max value
counter += .1; //increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
$('#zoomOut').on('click', function () {
if (counter > -3.32) { //if counter greater than min value
counter -= .1; //decrement counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
});
Demo http://jsfiddle.net/rbW35/5/
Example similar to what you want exists in official documentation. Slide event is only for mouse manipulation on slider, use change to capture slider changes. Here is fiddle
$(document).ready(function () {
var slider = $("#zoomSlider"),
counter = $("#zoom");
slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
change: function (event, ui) {
counter.val(ui.value.toFixed(2) + "%");
}
});
counter.val(slider.slider("value").toFixed(2) + "%");
$('[type="button"]').on('click', function (event) {
var el = $(event.currentTarget),
mult = el.data().negative ? 1 : -1;
slider.slider("value", slider.slider("value") + slider.slider("option", "step") * mult);
});
});
jsFiddle Example
We first get the current value of the slider. Then, we set the slider value to the current value minus one.
$('#zoomOut').click(function() {
var current_value = $('#zoomSlider').slider('option','value');
$("#zoomSlider").slider("value", current_value-=1);
});
If you want the have the slider animate as it's changing value, you can change the "animate" parameter to "true" in the creation of the slider.