jquery - 隐藏一个元素，然后在按键上显示它是父级的父级下一个元素

Question

当在文本框中按下输入时，我试图将 div 从屏幕左侧滑出。发生这种情况后，另一个 div 需要从右侧滑入（无需任何额外输入）。

这就是我到目前为止所拥有的。

JS：

$(':text').bind("enterKey", function(e) {
    $(this).parent().parent().hide('slide', {
        direction : "left"
    }, 1000);
    $(this).parent().parent().next().delay(750).show('slide', {
        direction : "right"
    }, 1000);
});
$(':text').keyup(function(e) {
    if (e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

HTML：

<div class="box" id="wherebox">
    <h2>Where</h2>
    <br/>
    <div id="wherecontent">
        <input type="text" class="maininputs" name="where" id="where" autofocus="autofocus"/>
        <img src="resources/imgs/right.png" id="wherenext" height="20px" width="50px"/>
    </div>
</div>
<div class="box" id="checkinbox">
    <h2>Check In Date</h2>
    <br />
    <div id="checkincontent">
        <img src="resources/imgs/left.png" id="checkinprev" height="20px" width="50px"/>
        <input type="text" id="checkin" name="checkin" readonly="readonly" class="maininputs"/>
        <img src="resources/imgs/right.png" id="checkinnext" height="20px" width="50px"/>
    </div>
</div>

任何人都看到我要去哪里错了吗？

编辑：目前#wherebox 将隐藏，但#bedbox 不会滑入。

Answer 1

看起来幻灯片效果正在进行一些 dom 更改，因此无法找到下一个元素，建议的解决方案是在幻灯片开始之前找到下一个元素

$(':text').bind("enterKey", function (e) {
    var $box = $(this).closest('.box'),
        $next = $box.next();;
    $box.hide('slide', {
        direction: "left"
    }, 1000);

    $next.delay(750).show('slide', {
        direction: "right"
    }, 1000);
});
$(':text').keyup(function (e) {
    if (e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

演示：小提琴