전환이 작동하지 않습니다.

Question

subscribe button에있는 search bar을 추가하려했는데 버튼의 표시 값을 JQuery click event으로 지연시킬 수 없습니다.
js에 다른 호버 기능을 사용하면 click event을 무시하고 transitions도 제대로 작동하지 않습니다.
내 첫 번째 게시물이므로, 실수를하면 유감입니다.

HTML :

<nav class="navbar navbar-inverse affix-top container" id="navbar"> 
        <div class="container-fluid"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <a class="navbar-brand" href="file:///C:/Users/Eren/Desktop/HTML-CSS/Project-BlackKnight/Project-BlackKnight.html?">Black Knight</a> 
         </div> 
         <div class="collapse navbar-collapse" id="myNavbar"> 
          <ul class="nav navbar-nav"> 
           <li class="active"><a href="#">Home</a></li> 
           <li class="dropdown"> 
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Page 1-1</a></li> 
             <li><a href="#">Page 1-2</a></li> 
             <li><a href="#">Page 1-3</a></li> 
            </ul> 
           </li> 
           <li><a href="#">Page 2</a></li> 
           <li><a href="#">Page 3</a></li> 
          </ul> 
          <ul class="nav navbar-nav navbar-right hidden-xs"> 
           <div class="container-2"> 
            <span class="icon"><i class="fa fa-search"></i></span> 
            <input type="search" id="search" placeholder="Search..." /> 
           </div> 
           <li class="subs"><a data-toggle="modal" data-target="#subscribe" href="#"><span class="glyphicon glyphicon-user"></span> Subscribe</a></li> 
          </ul> 
         </div> 
        </div> 
       </nav> 

CSS :

.navbar { border: none; box-shadow: none; } 

.navbar.affix {  
position: fixed;  
top: 0;  
z-index:10;  
} 

.container-2 { 
width: 200px; 
vertical-align: middle; 
white-space: nowrap; 
position: relative; 
} 

.container-2 input#search {  
width: 50px;  
height: 50px;  
background: #2b303b;  
border: none;  
font-size: 10pt;  
float: left;  
color: #262626;  
padding-left: 45px;  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
border-radius: 5px;  
color: #fff;  
-webkit-transition: width .70s ease;  
-moz-transition: width .70s ease;  
-ms-transition: width .70s ease;  
-o-transition: width .70s ease;  
transition: width .70s ease;  
} 

.container-2 input#search::-webkit-input-placeholder { color: #65737e; }  
.container-2 input#search:-moz-placeholder { color: #65737e; }  
.container-2 input#search::-moz-placeholder { color: #65737e; }  
.container-2 input#search:-ms-input-placeholder { color: #65737e; }  

.container-2 .icon {  
position: absolute;  
top: 50%;  
margin-left: 17px;  
margin-top: 17px;  
z-index: 1;  
color: #4f5b66;  
} 

.container-2 input#search:focus, .container-2 input#search:active { outline:none; width: 200px; }  
.container-2:hover+.subs{ display: none; }  
\#search { position: absolute; }  
.subs { margin-left: 45px; transition: 5s all 5s ease; } //this is the problem 
.container-2:hover input#search { width: 200px; }  
.container-2:hover .icon { color: #93a2ad; } 

JS : 당신이 더 이상 효과적인 아이디어가있는 경우

$('.navbar').affix ({ 
offset: { 
    top: function() { 
    return (this.bottom = $('.top-images').height()); 
} 
} 
}); 

$('#search').click(
function() { 
    $('.subs').hide(); 
} 
); 

$(document).click(
function(e){ 
    if (!$(e.target).is('#search')) { 
     setTimeout(function() { 
      $('.subs').show(); 
     }, 500); 
    } 
    if (!$(e.target).is('#search')) { 
     $('.modal').modal(toggle) 
    } 
    if ($(e.target).is('.sub-button')) { 
     $('.modal').modal(toggle) 
    } 
} 
); 

, 나는 '여기

내 코드입니다 제안을 위해 열립니다.
미리 감사드립니다.
여기 내 코드와 바이올린입니다 : 당신이 정확하게 만들기 위해 원하는 것을 알고 있지만 선택하지 fiddle link

Answer 1

show/hide 요소를 사용하면 delay을 사용할 수 있습니다.

if (!$(e.target).is('#search')) { 
    setTimeout(function() { 
     $('.subs').show(); 
    }, 500); 
    } 

에 : 예를 들어, 경우에,이 JQuery 코드 변경

if (!$(e.target).is('#search')) { 
    setTimeout(function() { 
     $('.subs').delay(1000).fadeIn(); 
    }, 100); 
    } 

을 그리고에 margin를 제거하여 li :

마지막으로

.navbar-nav>li { 
margin: 0; 
} 

, 여기에 바이올린은 다음과 같습니다 fiddle link
도 hover event으로 만들 수 있습니다.
hover으로 다른 바이올린을 만들었습니다. hover function
희망이 당신이 찾고있는 것입니다!

Answer 2

생 jsfiddle 내가 data-target='#subscribe' data-target='#search'에하는 그것을 확인하고 나를 다른 당신이 원하는 무엇을 알려 것을 해결 한 받는 사람