How to animate multiple items in listview?

Question

This article shows how to animate a listview item:

http://msdn.microsoft.com/en-us/library/windows/apps/jj244627.aspx#adding_listview_item_animations

I tried it and it's working fine. The problem is that it's animating only the first item in the listview. I want to animate the other items also. How can I do this?

P.S. Need answers in html version only.

Answer 1

Hello,

this might be helpful 

[1] http://stackoverflow.com/questions/16397990/listview-item-animations-windows-store-app

Regards,
Markus Kocybik     
Entwickler-Hotline for MSDN Online Germany

Disclaimer:
Please take into consideration, that further inquiries cannot or will be answered with delay.
For further information please contact us per telephone through the MSDN-Entwickler-Hotline: http://www.msdn-online.de/Hotline


For this post by the MSDN-Entwickler-Hotline the following terms and conditions apply: Trademarks, Privacy as well as the separate terms of use for the MSDN-Entwickler-Hotline.

Answer 2

Thanks for this. It's actually what I was looking for :) Though I searched Stackoverflow forums before posting, but maybe I missed that one... Anyway, I just tried it and it's working great. I made all the items animate this way:

    function changeImage() {
        // Get the two image elements
        var myItem = document.querySelectorAll(".item");

        for (var i = 0 ; i < myItem.length; i++) {
            var images = myItem[i].querySelector(".item-image");
            var imagesNew = myItem[i].querySelector(".item-image-new");

            // Swap out the old image source and choose the new image source
            images.src = imagesNew.src;
            if (images.src == lightGray)
                imagesNew.src = mediumGray;
            else if (images.src == mediumGray)
                imagesNew.src = darkGray;
            else
                imagesNew.src = lightGray;

            // Reset the elements for the pre-animation position and trigger the animation
            images.style.top = "0px";
            imagesNew.style.top = "250px";
            peekTile(images, imagesNew);
        }
   };