Javascript array object in jquery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-28 23:38 出处：网络

I have following code snippet in jquery.In which,I want to animate each element of array one by one. <script type=\"text/javascript\">

相关专题：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);
        })
    }
}