javascript - 从一个 Div 到另一个 Div 的“移动到下一个房间”效果

Question

我有一个居中的大 div，里面有一个图像，在那个图像中是右边的一个门口。我想要这样当你点击门口时，它会“缩放”到下一个图像，这将是下一个房间。

描述它的最佳方式类似于您在 Google 地图上沿路行驶时的街景。

有人可以帮忙吗？最好是 jQuery，但我对任何事情都持开放态度。尝试了一些类似缩放的插件，但没有影响。

理想的解决方案是转到另一个 Div，这样我就可以控制下一个“房间”中的内容（每个“房间”中都有交互式对象）。

希望这是有道理的？

我正在研究的示例：http ://www.ether-game.com/new

Answer 1

你在找这个吗？

http://jsfiddle.net/F9vhD/

您只需要将一个 div 移动到其自身宽度的左侧 -100%，而另一个相同。

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%'});
    });

});