0

テキストボックスでEnterキーを押すと、画面の左側から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 はスライドしません。

4

1 に答える 1

0

スライド効果がいくつかの 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");
    }
});

デモ:フィドル

于 2013-09-25T04:56:31.923 に答える