Jquery 加载时可折叠菜单_Jquery

Jquery 加载时可折叠菜单

jquery

Jquery 加载时可折叠菜单,jquery,Jquery,我试着做一些JQuery。单击“设置高度动画”按钮时，框将折叠。但如果我想摆脱按钮，所以它会在fx 1秒后自动折叠，我将如何做到这一点？我猜我必须在某个地方使用onLoad，还是需要重写整个代码致意马德斯 $（文档）.ready（函数（）{ $（“#btn1”）。单击（函数（）{ $（“#盒”）.animate（{height:“300px”}）； $（“#框”）.animate（{width:“300px”}）； }); $（“#btn2”）。单击（函数（）{ $（“#盒”）.anima

我试着做一些JQuery。单击“设置高度动画”按钮时，框将折叠。但如果我想摆脱按钮，所以它会在fx 1秒后自动折叠，我将如何做到这一点？我猜我必须在某个地方使用onLoad，还是需要重写整个代码

致意马德斯


$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“#盒”）.animate（{height:“300px”}）；
$（“#框”）.animate（{width:“300px”}）；
});
$（“#btn2”）。单击（函数（）{
$（“#盒”）.animate（{height:“100px”}）；
$（“#框”）.animate（{width:“100px”}）；
});
});
设置高度动画
重置高度

解决办法是：

<script>
$(document).ready(function(){
    setTimeout(function () {
        $("#box").animate({height: "300px"});
        $("#box").animate({width: "300px"});
    }, 100); // the 1000 is the delay in milliseconds
});
</script>


$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#盒”）.animate（{height:“300px”}）；
$（“#框”）.animate（{width:“300px”}）；
}，100）；//1000是以毫秒为单位的延迟
});

您可以设置一个超时来触发打开动画，如：

$(document).ready(function(){
    setTimeout(function () {
        $("#box").animate({height: "300px",  width: "300px"});
    }, 1000); // the 1000 is the delay in milliseconds
});

您可以这样尝试：-

$.animate（action1）.delay（n）.animate（action2）

其中n是延迟的毫秒数

i、 e

您可以对动画使用

setTimeout

，也可以使用

transition

css属性atmd为您提供了一个关于

setTimeout

的示例，我将为您提供一个关于

转换的示例。试试这个：
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>


div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px；
}
注意：此示例在Internet Explorer 9和早期版本中不起作用
将鼠标悬停在上面的div元素上，以查看过渡效果

摘自。
太好了，非常感谢你的回答。它现在正在工作。就像现在一样，箱子从一个角落装到另一个角落。如果我想让长方体垂直加载高度，然后水平加载宽度，该怎么办？@MadsKristensen:只需链接函数调用：$（“#长方体”）.animate（{height:“300px”）.animate（{width:“300px”）完美非常感谢，感谢所有在这里帮忙的人：-）向Mads致以最良好的问候
$(document).ready(function(){
            $("#box").delay(1000).animate({ height: "300px", width: "300px" }).delay(1000).animate({ height: "100px", width: "100px" });
        });

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>