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");
    }
});

演示：Fiddle

隐藏一个元素，然后在按键上显示它的父元素的父元素

1 个答案: