You should make the diffImage function the one to call hide, but name it something like showImages and pass in a true/false depending on whether you want to show or hide the images, then use a different offsets array depending on that flag.
That is, your button just has:
onclick="diffImage(this);"
diffImage looks like this:
function diffImage(img) {
if (img.src.match("images/on_btn.png")) {
console.log('Low');
img.src = "images/off_btn.png";
showImages(false);
}
else {
console.log('up');
img.src = "images/on_btn.png";
showImages(true);
}
}
Change hide to be:
function showImages(show) {
var image1 = document.getElementById("image2");
var image2 = document.getElementById("image3");
var image3 = document.getElementById("image4");
var images = [image1, image2, image3];
var offsets;
if (show) {
offsets = [
/*** CHANGE YOUR OFFSETS HERE TO BE THE RIGHT ONES ***/
{ top: "24px", left: "-48px" },
{ top: "100px", left: "253px" },
{ top: "41px", left: "1195px" }
];
WinJS.UI.Animation.enterContent(images, offsets).done();
} else {
offsets = [
{ top: "24px", left: "-48px" },
{ top: "100px", left: "253px" },
{ top: "41px", left: "1195px" }
];
WinJS.UI.Animation.exitContent(images, offsets).done();
}
}
Please note where you need to set your proper offsets for the enterContent animation, and note that you need to use exitContent animation when hiding.
If you have more questions on this, please refer to the WinJS.UI.Animations documentation or Chapter 11 of my book. It's not typical that others write your code for you on these forums other than providing a direct answer, which I've done.
How to Hide and show a set of imageson a Single click in HTml5?
