...

View Full Version : Loop



Jackjackjack
06-29-2012, 01:58 PM
I'm currently digging into Metro app development with HTML5/JS. I'd like to imitate the typical tile animation on Metro's home screen.

I don't manage to get both the peekTile(); and the unpeekTile(); functions executing one after the other in a loop having a timeout of a few seconds between both animations.

Can anybode help?
Thanks in advance!


JS

var page = WinJS.UI.Pages.define("/html/updateTile.html", {
ready: function (element, options) {
peekTile();
unpeekTile();
}
});


// Play the Peek animation - downwards
function peekTile() {
var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

// Reposition tiles to their desired post-animation position
tile1.style.top = "-150px";
tile2.style.top = "-150px";

peekAnimation.execute();
}

// Play the peek anmation - upwards
function unpeekTile() {
var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

// Reposition tiles to their desired post-animation position
tile1.style.top = "0px";
tile2.style.top = "0px";

peekAnimation.execute();
}



HTML

<div id="croppingDiv">
<div id="tile1">Content 1</div>
<div id="tile2">Content 2</div>
</div>


CSS

#croppingDiv {
width: 310px;
height: 150px;
overflow: hidden;
}

#tile1,
#tile 2 {
width: 310px;
height: 150px;
position: relative;
}


(Here's an example of the animation: http://www.drewgreenwell.com/projects/metrojs#liveTileBasicExample - the first one under "Basic Examples" – but I don't want to use the jQuery script, I'd like to use the predefined WinJS.UI.Animation.createPeekAnimation by Windows.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum