javascript - 通过 jQuery 或 CSS3 从右向左滑动一个 div

Question

我有以下 jsfiddle。当用户单击任何示例链接时，我试图让右侧的 div 滑动到左侧 div 所在的位置，我不知道如何执行此操作，因为我对 CSS3 转换和 jquery 相当陌生。有人可以帮助指导我朝着正确的方向前进。我也看过 jQuery animate，但发现它有点令人困惑。

过渡应该在 IE10+ 中工作，如果没有过渡，低于它的任何内容都可以

http://jsfiddle.net/AV22p/

下面是我的HTML结构

<section id="modalwindow">
    <div id="foodlist">
        <div class="links">
            <h1>Div 1</h1>
                <ul>
                    <a href="#"><li>Example1    </li></a>
                    <li><a href="#">Example2</a></li>
                    <li><a href="#">Example3</a></li>
                    <li><a href="#">Example4</a></li>
                    <li><a href="#">Example5</a></li>
                    <li><a href="#">Example6</a></li>
                    <li><a href="#">Example7</a></li>
                    <li><a href="#">Example8</a></li>
                </ul>

        </div>
    </div>
</section>

<section id="modalwindow">
    <div id="food_details">
        <div class="details">
            <h1>Recipe</h1>
            <ul>
                <li>test </li>
                <li>test</li>
                <li>test</li>
           </ul>

        </div>
    </div>
</section>

Answer 1

不确定这是否是您想要的，因为描述非常模糊。但您也许可以将其转换为您的需求。

divWidth 检查部分的宽度。单击链接时，包含 #food_details 的部分将向左移动 #modalwindow 的(负)宽度。

$('.links ul li a').click(function(){
    var divWidth = '-'+$('#modalwindow').width();
    $('#food_details').parent().animate({left: divWidth});
});

http://jsfiddle.net/AV22p/3/

另请注意，您的第一个示例链接具有与其余链接不同/无效的标记。