javascript - 过渡不起作用

Question

我试图添加一个在订阅按钮上扩展自身的搜索栏，但我无法使用JQuery点击事件<来延迟按钮的显示值。
如果我在js中使用另一个悬停函数，它会忽略点击事件，并且转换也不起作用。
这是我的第一篇文章，所以，如果我犯了任何错误，我很抱歉。

这是我的代码:

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 : fiddle link

Answer 1

当您显示/隐藏元素时，您可以使用延迟。例如，在您的情况下，更改此 JQuery 代码:

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

至:

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

并删除 li 中的margin:

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

最后，这是一个 fiddle :fiddle link
您也可以使用 hover 事件 来实现。
我用hover做了另一个 fiddle : hover function
希望这就是您一直在寻找的!