Question

我正在尝试将一个元素从页面向左滑动，当在页面上的任何位置按下右箭头键时，新元素将从右侧滑入页面（不仅仅是在特定输入中）。 / p>

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

演示：Fiddle

元素隐藏在按键的任何地方页面上

1 个答案: