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

我试图在文本框中按下输入时，在屏幕左侧滑动一个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不会滑动

来源

2013-09-25 nzleet

你可以为你的问题的jsfiddle？ –

似乎很好...... http://jsfiddle.net/arunpjohny/9MgRd/1/ –

从http://jsfiddle.net/ –

它看起来像幻灯片效果正在采取一些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

来源

2013-09-25 04:56:31

完美地工作。感谢百万超快解决方案！ – nzleet

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

回答

相关问题