从一个Div到另一个“移入下一个房间”的效果

Question

I have a centered large div with an image in it, within that image is a doorway to the right. I'm wanting to make it so that when you click the doorway, it 'zooms' to the next image, which will be of the next room.

The best way to describe it is similar to what Street View does when you're going down the road on Google maps.

Can anybody help? Preferably jQuery, but I am open to anything. Tried a few Zoom like plugins, but to no affect.

The ideal solution would be to go to another Div, so I am then able to control the content within the next 'room' (I have interactive objects in each 'room').

Hopefully this makes sense?

Example I'm working on: http://www.ether-game.com/new

Answer 1

Are you looking for this?

http://jsfiddle.net/F9vhD/

You just need to move one div to -100% left of its own width, and the other one the same.

HTML:

<div class="room" id="room1">
Room 1
<input type="button" id="nextRoom" value="go to next room" />
</div>
<div class="room" id="room2">
 s
</div>

CSS:

html,body {
    width:100%;
    height:100%;
    overflow:hidden
}

body {
    margin:0;
    padding:0;
    color:#fff
}

.room {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0
}

#room1 {
    background:red;
}

#room2 {
    background: blue;
    left:100%
}

JS:

$(document).ready(function() {

    $('#nextRoom').on('click', function() {
            $('#room1').animate({left:'-100%'}); 
        $('#room2').animate({left:'0%'});
    });

});