Javascript array object in jquery

Question

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>

Darin Dimitrov · Accepted Answer · 2011-04-26 13:10:41Z

1

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.

edited Apr 26, 2011 at 13:10

answered Apr 26, 2011 at 12:38

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ezmilhouse Over a year ago

don't get this, inside loops jquery's this always refers to the current obj in the loop

Darin Dimitrov Over a year ago

@ezmilhouse, yes, that's why you might need to capture the one outside the loop. Anyway calling .fadeIn on a string doesn't make much sense, that's why I thought the OP needed to show this on some other object.

santosh singh Over a year ago

I am not getting any error,but I don't see any animation on the screen

Darin Dimitrov Over a year ago

@geek, where do you want to see the animation? You might need to use some selector: $('.foo').fadeIn(... in order to select the element where you want the animation to appear. Please see my updated answer for a sample.

ezmilhouse Over a year ago

you don't see any animation, because $this is not the jquery obj your looking for, just a wrong answer

|

Teneff · Accepted Answer · 2011-04-26 12:38:00Z

1

you should use it like this:

$.each(myCars, function(key, value){

    alert(value);

});

http://api.jquery.com/jQuery.each/

answered Apr 26, 2011 at 12:38

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Comments

ezmilhouse · Accepted Answer · 2011-04-26 12:40:57Z

1

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");
});

answered Apr 26, 2011 at 12:40

ezmilhouse

9,1398 gold badges31 silver badges38 bronze badges

2 Comments

santosh singh Over a year ago

I tried your second approach.In this call all the div elements are fading and fade out at the same time ,but I want one by one

ezmilhouse Over a year ago

guess each is too fast, try to add a delay()

Francesco Terenzani · Accepted Answer · 2011-04-26 13:15:03Z

1

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);
        })
    }
}

answered Apr 26, 2011 at 13:15

Francesco Terenzani

1,3917 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript array object in jquery

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related