Javascript array object in jquery
I have following code snippet in jquery.In which,I want to animate each element of array one by one.
<script type="text/javascript">
开发者_如何学编程 function AnimateText() {
var myCars = new Array("Saab", "Volvo", "BMW");
myCars.each(function () {
$(this).fadeIn("2000").fadeOut("2000");
});
}
</script>
But I am getting this error Object does not support this method or property
EDIT
Thanks all for the answer.Now I have problem in animating the array element on the screen.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AnimateText() {
var myCars = new Array("Saab", "Volvo", "BMW");
$.each(myCars, function (key, value) {
$("#myDiv").html(value).fadeIn("2000") ;
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myDiv"></div>
<input type="button" id="btnTest" value="Animate" onclick="AnimateText();" />
</form>
</body>
</html>
You need to use the static $.each() method:
var myCars = ["Saab", "Volvo", "BMW"];
// Capture this because inside the loop it will have a different meaning
var $this = $(this);
$.each(myCars, function () {
$this.fadeIn("2000").fadeOut("2000");
});
You also probably want to show this text in some DOM element:
var myCars = ["Saab", "Volvo", "BMW"];
$.each(myCars, function () {
$('#spinner').html(this).fadeIn("2000").fadeOut("2000");
});
where for example spinner is a div:
<div id="spinner"></div>
UPDATE:
After seeing your update it is more clear to me what you are trying to achieve. You could use the .delay() method:
var myDiv = $('#myDiv');
var myCars = ['Saab', 'Volvo', 'BMW'];
$('#btnTest').click(function() {
$.each(myCars, function(index, value) {
var val = value;
myDiv.delay(1000).fadeIn(1000, function() {
myDiv.text(val);
});
});
});
And here's a live demo.
you should use it like this:
$.each(myCars, function(key, value){
alert(value);
});
http://api.jquery.com/jQuery.each/
function AnimateText() {
var myCars = new Array("Saab", "Volvo", "BMW");
$(myCars, function( key, value ) {
$('#' + value).fadeIn("2000").fadeOut("2000");
});
}
Better solution would be having html divs with IDs (Saab, Volvo, etc ...) and having a shared class .cars:
$(".cars").each(function(){
$(this).fadeIn("2000").fadeOut("2000");
});
This should be more close to what you are expecting from your code, I think :P
var myCars = Array("Saab", "Volvo", "BMW");
var currentCar = 0;
var myDiv = $('#myDiv');
function AnimateText() {
var car = myCars[currentCar++];
if (car) {
myDiv.html(car).fadeIn('2000', function() {
myDiv.fadeOut('2000', AnimateText);
})
}
}
加载中,请稍侯......
精彩评论