We Keep Coding

jQuery - stop/cancel scroll event callback after a certain scroll position

I want the number to count up to its designated value and stay there, but because the function gets called every time the page is being scrolled below a certain height, then it goes back to 1.
The solution would be to make it call the function only once when the page has been scrolled to below the certain height.
Ive tried placing the .one() method several places but that didn't help
http://jsfiddle.net/d7vKd/1543/
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $("#mydiv").position().top) {
window.randomize = function() {
$('.radial-progress1').attr('data-progress', Math.floor(94));
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
setTimeout(window.randomize, 200);
}
})

You should unbind your scroll event once the callback has met its demands:
$(document).on('scroll.someName', function(){
var isPassedPos = $(this).scrollTop() >= $("#mydiv").position().top;
if( isPassedPos ){
$(document).off('scroll.someName') // <-------------- remove the event listener
window.randomize = function() {
$('.radial-progress1').attr('data-progress', Math.floor(94));
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
setTimeout(window.randomize, 200);
}
})

jquery animate lag issue

I have a contentSlider with width 200% and i am trying to use .animate to slide the content left and right. But during animation, there is some degree of lag. Here is my animate code.
$("#contentSlider").stop().animate({
left: "-100%"
},{
duration: 1000,
easing: "linear",
complete: function(){
$("#"+page).remove();
$('#contentSlider').css('left', '0px');
pageID = clickedID;
page = pageName;
if($("#audioControl").hasClass('audio')){
enableCowSound();
}else{
$(".moosound").off('hover');
}
$(container).removeClass('animating');
}
});
Appreciate any help!

Jquery animation looping

I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.

try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/

Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.

Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});

Jquery: everything works, but my function wont fire

Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}

The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API

jQuery slideDown with easing

How can use the slideDown() function with easing?
Maybe extend it somehow?
I'm looking for something like this:
jQuery.fn.slideDown = function(speed, easing, callback) {
return ...
};
So i can use it slide this
$('.class').slideDown('400','easeInQuad');
or this
$('.class').slideDown('400','easeInQuad',function(){
//callback
});

Take a look at this page, which contains many easing functions: http://gsgd.co.uk/sandbox/jquery/easing/
Using that plugin you can do things like:
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});

You can use the animate method with jQueryUI and the easing effects like this:
$(".demo").animate({height: "hide"}, 1500, "easeInQuad", function(){});

Easing In and Out:
$("#SignIn").click(function () {
$(".divSlideTop").slideDown({
duration: 1000,
easing: "easeInQuad"
});
});
$("#close").click(function () {
$(".divSlideTop").slideUp({
duration: 1000,
easing: "easeOutQuad"
});
});

$('.class').slideDown(400,'easeInQuad');
Quotes not need for numeric.

Have a look at my pen Demo you simple to use $(element).slideUp({duration:1000});