隱藏一個元素，然後顯示它的父母的父母的下一個按鍵元素

我試圖在文本框中按下輸入時，在屏幕左側滑動一個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

隱藏一個元素，然後顯示它的父母的父母的下一個按鍵元素

回答

相關問題