过渡不起作用

Question

我试图添加一个扩展到subscribe button上的subscribe button，并且不能用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; }  

联署材料：

$('.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)
    }
}
);

如果你有更有效的想法，我愿意听取你的建议。

提前谢谢你！

下面是对我的代码的修改：琴杆

Answer 1

当您使用delay元素时，可以使用show/hide。例如，在您的情况下，更改此JQuery代码：

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

至：

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

并删除margin中的li

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

最后，这里有一个小提琴：琴杆

你也可以用hover event制作。

我又用hover做了一个小提琴：悬停函数

希望这就是你一直在寻找的东西！

Answer 2

我不知道你到底想做什么，但是检查一下小提琴，我已经修正了data-target='#subscribe' to data-target='#search'，检查它，让我知道你还想得到什么