Home/ Questions/Q 4552402
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:47:02+00:00

I have following code snippet in jquery.In which,I want to animate each element of

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0