We Keep Coding

The bounce effect in jquery is not working ideally

I want create element which will appear with bounce effect and this effect should run all time while user not clicking to help_man, when its happened effect is completed. Now its work, but not prefer, effect run slow and eventually faster and faster. Bounce does not always stop on mouse click event.
JsFiddle
HTML:
<div class='task_wrapper'>
<div class='help_man'>
<img src='images/cow.png'/>
</div>
</div>
JS:
<script src="js/jquery-ui-bounce.min.js"></script>
<script>
var to_stop = 0;
function run_bounce()
{
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
setInterval(run_bounce,3000);
}else{
return;
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});
</script>
Thanks!

You need to add positon as abosulte in CSS.That is way we animate DOM elements on fly.
Alway best pratices to clearInterval before call setInterVal(); which return number.
.task_wrapper{
postion:absolute;
}
var to_stop = 0,interval;
function run_bounce()
{
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
clearInterval(interval);
interval = setInterval(run_bounce,3000);
setInterval(run_bounce,3000);
}else{
$(".task_wrapper").stop(); //Note here stop()
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});
Fiddle Demo

I think you need to clear the interval,
Fiddle: http://jsfiddle.net/9nEne/13/
JS
var to_stop = 0, interval;
function run_bounce() {
if(to_stop==0)
{
$(".task_wrapper").effect( "bounce", "fast" );
clearInterval(interval);
console.log(interval);
interval = setInterval(run_bounce,3000);
}else{
$(".task_wrapper").stop();
}
}
$(document).ready(function(){
$(".help_man").click(function() {
to_stop = 1;
});
run_bounce();
});

Preload all sound and images before starting animation

I'm building a simple animation web app that involves sound and images. I want it so that when a user enters the site they see a "now loading" page, and when all the images and audio files are done loading it calls a function that starts the animation. So far the code I have is roughly this:
var img1, img2;
var sound1, sound2;
function loadImages() {
img1=new Image();
img1.src="...";
img2=new Image();
img2.src="...";
img1.onload=img2.onload=handleImageLoad;
}
function loadSound() {
createjs.Sound.registerSound({id:"sound1", src:"sound1.wav"});
createjs.Sound.registerSound({id:"sound2", src:"sound2.wav"});
createjs.Sound.addEventListener("fileload", handleSoundLoad);
}
function handleImageLoad(e) {
//Do something when an image loads
}
function handleSoundLoad(e) {
//Do something when a sound loads
if(e.id=="sound1") sound1 = createjs.Sound.createInstance("sound1");
else if(e.id=="sound2") sound2 = createjs.Sound.createInstance("sound2");
}
$(document).ready(function() {
//overlay a "now loading" .gif on my canvas
...
...
loadSound();
loadImages();
}
// call this when everything loads
function start() {
//remove "now loading..." overlay .gif
...
...
//start animating
}
handleImageLoad() and handleSoundLoad() are invoked independently of each other so I can't rely on them on calling start(). How can I figure out when everything is loaded? What callback function(s) can I use to achieve this?

Using the built-in SoundJS registerSound method is not bad, but PreloadJS will handle both Sounds and images (and other types) in a single queue. Check out the examples in the PreloadJS GitHub.
http://preloadjs.com and
http://github.com/CreateJS/PreloadJS/

This is probably not the best solution, but I did something similar this way:
var lSnd = false;
var lImg = false;
$(document).ready(function(){
setInterval(checkLoadComplete,1000);
});
function loadSound(){
//loadingSound
//on load complete call= soundLoadingComplite();
}
function soundLoadingComplite(){
//do some stuff
lSnd = true;
}
function loadImages(){
//loadingImages
//on load complete call= imageLoadingComplite();
}
function imageLoadingComplite(){
//do some stuff
lSnd = true;
}
function checkLoadComplete(){
if(lSnd&&lImg){
startAnimation();
//clear interval
}
}
Hope this helps.

I'd be doing it this way:
function loadSound(){
songOK = false;
song = new Audio()
song.src = uri;
song.addEventListener('canplaythrough', function(){ songOK = true; }, false)
return songOK;
}
function loadImage(){
pictOK = false;
pict = new Image();
pict.src = uri;
pict.onload = function (){
pictOK = true;
}
return pictOK;
}
function loadMedia(){
startNowLoading();
if( loadSound() && loadImage())
stopNowLoading();
else
kaboom(); //something went wrong!
}
$(document).ready(function(){
loadMedia();
}
This should allow you to execute the functions in sequence.

how to make this custom animation by changing background position in jquery using intervals?

I am trying to make a small animation by moving the background position (frames) of the image which is background on my div. I am using Jquery to make this animation happen. I have 6 frames on the background image, first frame starting at 0,0px, second starting at 85px,0, third at 172px,0 and so on.
I want to transition between these frames until stop is clicked. My jquery code is pasted below. I have made an array for the pixels to move across. I want each frame to hold upto 1000 milliseconds, then transition to next frame. I am going wrong somewhere but unable to figure out where..
here is my code
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
}
}

your code looks like has some logical error,run your code ,just can see the same background.
try:
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
var j=0;
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
if (j%framespx.length == i){
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
j++
break;
}
}
}

css({'background-position': xPos+' '+yPos});
okay the above attribute value is a bit confusing for me, hopefully that is correct but with more surety;
css('background-position-x', xPos);
css('background-position-y', yPos);
Now I don't think for loop is mandatory here
var posAry=[0,85,172,256,512,1024];
var currPos=0;
var timer;
$(document).ready(function () {
$("#start").click(function() {
timer=setInterval(move,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function move() {
$('.fixed').css({'margin-left': posAry[currPos]+'px' }); /**you can change it to background postion/padding/... as needed by you**/
currPos++;
if(currPos==(posAry.length))
currPos=0; // for looping back
}
http://jsfiddle.net/7PvwN/1/

Whats the simplest way to these 4 buttons?

I want to make 4 buttons that are:
when you click on it,the one chosen, its background-image changed, the other 3 remain the original background image unless user hover it ,while user hover the buttons it changes its background-image .
If I only use :hover, or :active,after clicked,the background image will revert to original when I release mouse,or just moved away mouse, if I use click function, after it changed background image it cannot be revert or have to type a long piece codes to control it.What is the simplest way to make these 4 buttons?
I tried this: abit clumsy, I have :hover in css, but it is actually missing the hover effect for this code
$s_btn_1.on('click',function() {
if (chosen!=1){
chosen = 1;
console.log('chosen');
$.get("services_1.php", function(data){
// $service_box.html(data);
});
return_default();
$folder1.css('background',"url('images/services/btn1_hover.png')");
$folder1.css('background-size',"100% 100%");
}
});
$s_btn_2.on('click',function() {
if (chosen!=2){
chosen = 2;
console.log('chosen');
$.get("services_2.php", function(data){
// $service_box.html(data);
});
return_default();
$folder2.css('background',"url('images/services/btn2_hover.png')");
$folder2.css('background-size',"100% 100%");
}
});
$s_btn_3.on('click',function() {
if (chosen!=3){
chosen = 3;
return_default();
$folder3.css('background',"url('images/services/btn3_hover.png')");
$folder3.css('background-size',"100% 100%");
}
});
$s_btn_4.on('click',function() {
if (chosen!=4){
chosen = 4;
return_default();
$folder4.css('background',"url('images/services/btn4_hover.png')");
$folder4.css('background-size',"100% 100%");
}
});
//$("#service_btn").addClass(".folder1_hover");
function return_default(){
$folder1.css('background-image',"url('images/services/btn1.png')");
$folder2.css('background-image',"url('images/services/btn2.png')");
$folder3.css('background-image',"url('images/services/btn3.png')");
$folder4.css('background-image',"url('images/services/btn4.png')");
$folder1.css('background-size',"100% 100%");
$folder2.css('background-size',"100% 100%");
$folder3.css('background-size',"100% 100%");
$folder4.css('background-size',"100% 100%");
}
});

I just finished my aim so I post my code here, I think it is the simplest way,and clear
$(document).ready(function() {
var btns = {
'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
'$all_btn' : $('.all_btn'),
'$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
'folders_status':new Array('inactive','inactive','inactive','inactive')
,jquery_func : function(){
btns.$all_btn.each(function(){
$(this).click(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
btns.$folders[i].css(imageurl_o[i]);
btns.folders_status[i]='inactive';
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
btns.folders_status[i]='active';
}
}
});
$(this).mouseover(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
if(btns.folders_status[i]=='inactive')
btns.$folders[i].css(imageurl_o[i]);
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
}
}
});
});
}
}
btns.jquery_func();
});

Add fade effect to jQuery image replace on hover script

There were a few topics about this already but they didn't quite help in my case. I've written a small script to change the image source of some social icons when hovered over. I'm trying to add a fadeIn and fadeOut effect so it isn't just a straight up image swap. Here is my script:
$(".social_icons").live('hover', function() {
if ($(this).attr("class") == "social_icons") {
this.src = this.src.replace("-black","-color");
} else {
this.src = this.src.replace("-color","-black");
}
$(this).toggleClass("on");
});
How can I add a fadeIn/fadeOut effect to this?

Try this
$(".social_icons").live('hover', function() {
var $curr = $(this);
if ($(this).attr("class") == "social_icons") {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-black","-color"));
$curr.fadeIn('slow');
});
} else {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-color","-black"));
$curr.fadeIn('slow');
});
}
$(this).toggleClass("on");
});