jQuery——动画篇（隐藏显示、上卷下拉、淡入淡出、animate、stop、each）

最新推荐文章于 2024-06-13 09:00:00 发布

anfangw

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量1.2w

点赞数 4

分类专栏： jQuery javascript 文章标签： jquery 动画

本文链接：https://blog.csdn.net/anfangw/article/details/53695154

版权

这篇博客详细介绍了jQuery中的动画效果，包括hide、show方法实现隐藏和显示，slideDown、slideUp进行上卷和下拉动画，toggle方法进行显示与隐藏的切换。此外，还探讨了淡入淡出动画fadeOut、fadeIn和fadeToggle，以及animate和stop用于更复杂的动画控制。最后，提到了each方法、索引操作inArray、字符串处理的trim方法和DOM元素获取的get方法。

摘要由CSDN通过智能技术生成

隐藏显示

hide方法

$elem.hide()
.hide( options )hide()//就会匹配元素的宽度，高度，以及不透明度，同时进行动画操作
.hide("fast / slow")//代表200和600毫秒的延时动画
<script type="text/javascript">
 //点击buttom2 执行动画隐藏
 $("button:last").click(function() {
    
     $("#a2").hide({
         duration: 3000,
         complete: function() {
    
             alert('执行3000ms动画完毕')
         }
     })
 });
</script>
<script type="text/javascript">
//点击buttom1 直接隐藏
$("button:first").click(function() {
    
    $("#a1").hide()
});
</script>

show方法

<script type="text/javascript">
//点击buttom
//执行3秒隐藏
//执行3秒显示
$("button").click(function() {
    
    $("#a1").hide(3000).show(3000)
});
</script>

显示与隐藏切换toggle方法

<script type="text/javascript">
$("button:first").click(function() {
    
    $(".left").toggle(3000)
});
 //如果元素是最初显示，它会被隐藏;如果隐藏的，它会显示出来
</script>

上卷下拉

下拉动画slideDown

<script type="text/javascript">
//点击buttom
$("button:first").click(function() {
    
   $("#a1").slideDown(3000)
});
//slideDown([duration],[complete])
//$("ele").slideDown(1000, function() {等待动画执行1秒后,执行别的动作....});
</script>

上卷动画slideUp

$("elem").slideUp();
slideUp([duration],[easing],[complete])
<script type="text/javascript">
$("button:first").click(function() {
    
   $("#a1").slideUp(3000)
});

$("button:last").click(function() {