Question

单击searc按钮时，我有简单的代码展开框这里的HTML代码

<a id="displayText" href="javascript:toggle();"><img src="images/search.png"></a>
<div id="toggleText" style="display: none;">
<form>
<input type="text" name="" placeholder="search">
</form> 
</div>

N我的js代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";

}
else {
    ele.style.display = "block";

}
} 
</script>

效果很好，但我希望在展开时效果平稳，帮助我谢谢

Answer 1

首先将 css 设置为此（您可以更改转换的持续时间）：

#toggleText {
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
            transition: all .25s ease;
    visibility: hidden;
    opacity: 0;
}

#toggleText.focused {
    visibility: visible;
    opacity: 1;
}

然后将您的 HTML 更改为：

<button id="displayText"><img src="images/search.png"></button>
<div id="toggleText">
    <form>
        <input type="text" name="" placeholder="search">
    </form> 
</div>

然后将 javascript 更改为此添加jQuery库：

$("#displayText").click(function() {
    $("#toggleText").toggleClass("focused");
});

Answer 2

我建议看看css过渡，这些非常顺利。而不是显示无/块，使用不透明度或最大宽度。

使用max-width，你将它设置为0，然后设置你想要的任何宽度，并应用一个转换，这样你就可以设置它移动的速度，延迟等。这样它会向侧面滑出......

或者您可以将不透明度设置为0然后设置为1，它将淡入。

我刚刚做的一个例子就是这个eBay商店标题中的表单，你可以检查一下代码，看看我是怎么做的，并调整它以适应..

Dune eBay Store Link

扩展框搜索时平滑

2 个答案: