Solved

jqery function wont work

Posted on 2013-05-10
1
342 Views
Last Modified: 2013-05-10
Hi, Why cant the following jquery work when I place the code in a separate function as below

I get no error but no animation.

$(document).ready(function(){
 
  var $val1=6;
  var $val2=10.3;
  var img = ["images/bcave1.png", "images/bcave2.png"];
  var indexNum=0;
  
	setInterval("animatepic1()",100);
 /*  var gameLoop = setInterval( function(){
	  $("#pic").attr("src", img[indexNum]);
      indexNum++;	
      if (indexNum >= 2) {indexNum = 0;} 
	   
	   } , 100);
	   */
  
 
   
 }); 
 
   function animatepic1(){
			 $("#pic").attr("src", img[indexNum]);
     		 indexNum++;	
      		 if (indexNum >= 2) {indexNum = 0;} 
	   
	    }

.....
<img id ="pic" src="images/bcave1.png" alt="eight ball" />

Open in new window

0
Comment
Question by:jagguy
1 Comment
 
LVL 4

Accepted Solution

by:
Ersoy Hasan earned 500 total points
ID: 39155181
I suppose it's because indexNum and img array are defined in $(document).ready function's scope.
just change:
var indexNum=0;
//to 
window.indexNum=0;//this way you will define them in global object and they will be accessible everywhere

Open in new window

or even better move your function into ready scope and use the correct way to address a function with setInterval
$(document).ready(function(){
 
  var $val1=6;
  var $val2=10.3;
  var img = ["images/bcave1.png", "images/bcave2.png"];
  var indexNum=0;
  

  
    function animatepic1(){
			 $("#pic").attr("src", img[indexNum]);
     		 indexNum++;	
      		 if (indexNum >= 2) {indexNum = 0;} 
	   
	    }
	setInterval(animatepic1 ,100);   
 }); 
 
.....
<img id ="pic" src="images/bcave1.png" alt="eight ball" />

Open in new window

0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question