javascript - 元素隐藏在页面上任意位置的按键上

Question

当在页面上的任何位置（不仅仅是在特定输入中）按下右箭头键时，我试图让一个元素从页面滑出到左侧，并且一个新元素从右侧滑入页面。

实现了 jQuery 和 jQuery UI。这是我到目前为止所拥有的：

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>

JS：

$('*').bind("rightKey", function(e) {
var $box = $(this).closest('.box'), $next = $box.next();
$box.hide('slide', {
direction : "left"
}, 1000);
$next.delay(750).show('slide', {
direction : "right"
}, 1000);
});
$('*').keyup(function(e) {
if (e.keyCode == 39) {
$(this).trigger("rightKey");
}
});

有谁知道缺少什么？目前，它仅在选择输入时才起作用。

Answer 1

尝试

$('.box').first().show();
$(document).on("rightKey", '.box', function (e) {
    var $box = $(this).closest('.box'),
        $next = $box.next();
    $box.hide('slide', {
        direction: "left"
    }, 1000);
    $next.delay(750).show('slide', {
        direction: "right"
    }, 1000);
});
$(document).on('keyup', '.box', function (e) {
    if (e.keyCode == 39) {
        $(this).trigger("rightKey");
    }
});

演示：小提琴