I am trying to move an image from bottom left to top right position on the screen at the click event of the image. Now, when the image is at this position(top right), it should move to bottom right corner of the screen on the click event of the image. But the image doesn't move from the second position (top right). any suggestions why ?

This is the code for the .xml file : 

```
<Alloy>
    <View class="container">
        <View class = " HeadingClass" >
            <Label class="headingClass" top = "0%">Scrollable View And Animation Screen</Label>
        </View>
        <ScrollableView class = "scrollableViewClass" id="scrollableView">
            <ImageView class="imgView1" id="imgViewId1"></ImageView>
            <ImageView class="imgView2" id="imgViewId2"></ImageView>
            <ImageView class="imgView3" id="imgViewId3"></ImageView>
            <ImageView class="imgView4" id="imgViewId4"></ImageView>
            <ImageView class="imgView5" id="imgViewId5"></ImageView>
        </ScrollableView>
        <View class="imageAnimationView" id="imageAnimation" >
            <ImageView class="animateImageClass" id="animateImage"></ImageView>
        </View> 
    </View>

</Alloy>

```

This is the code for the . js file :

```
var args = $.args;
$.animateImage.addEventListener('click', function(e) {
    if($.animateImage.top == "70%" && $.animateImage.left == "2%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "1%",
            left : "80%",
            duration : "2000" // top-right
        });
    }
    else if ($.animateImage.top == "1%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "80%",
            duration : "2000"
        });
    }
    if ($.animateImage.top == "70%" && $.animateImage.left == "80%") {
        var viewAnimate = Ti.UI.createAnimation({
            top : "70%",
            left : "2%",
            duration : "2000"
        });
    }
    $.animateImage.animate(viewAnimate);
});

```