使用jquery ui进行水平滑动答案

【问题标题】：Horizontal sliding using jquery ui使用jquery ui进行水平滑动
【发布时间】：2017-09-01 05:06:06
【问题描述】：

我需要让一个 div 消失在左边，让第二个从右边出现。我正在使用以下 jquery UI 函数来执行此操作：

hide("slide", { direction: "left" }, 1000);
show("slide", { direction: "right" }, 1000);

我遇到的问题是第一个和第二个 div 在消失和进入时没有对齐，正如您在这个小提琴中看到的那样：

https://jsfiddle.net/oagxfpru/

我想让第二个div在进入场景时处于相同的高度。

有什么想法吗？感谢您的帮助

【问题讨论】：

标签： javascript jquery jquery-ui slide

【解决方案1】：

$(document).ready(function() {
    $("#second").hide();
    
    $("#toSecond").on('click', function() {
        $("#first").hide("slide", { direction: "left" }, 1000);
        $("#second").show("slide", { direction: "right" }, 1000);
    });

    $("#toFirst").on('click', function() {
        $("#second").hide("slide", { direction: "left" }, 1000);
        $("#first").show("slide", { direction: "right" }, 1000);
    })
});

#first{float:left;
width:100%;}
#second{width:100%;}

<body>
    <div id='first'>
        Some content here<br/>
        that should slide to the left<br/>
        No problem with that
        <input type="button" id="toSecond" value="to second">
    </div>
    <div id='second'>
        This should be at the same height<br/>
        then the first div when sliding to the left<br/>
        This ain't working properly :/
        <input type="button" id="toFirst" value="to first">
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="test.js"></script>
</html>

【讨论】：

感谢您的帮助！ :)
如果我得到了第三个 div，我该怎么办？我应该添加什么CSS？再次感谢您的帮助:)