动画-阿里云开发者社区

动画

2022-10-13 105

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 动画

1.基础

1.1 hide()

方法描述：隐藏元素。

需求描述：创建一个显示div，然后隐藏该元素

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

<div class="box"></div>

$('.box').hide();

1.2 show()

方法描述：显示元素。

需求描述：创建一个隐藏div，然后显示该元素

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

$('.box').show();

1.3 toggle()

方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

需求描述：创建一个按钮，控制div显示和隐藏

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

$('button').click(function () {
    $('.box').toggle();
});

2 渐变

2.1 fadeIn()

方法描述：通过淡入的方式显示匹配元素。

需求描述：创建一个按钮，控制div缓慢淡入

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

$('button').click(function () {
    $('.box').fadeIn('slow');
});

2.2 fadeOut()

方法描述：通过淡出的方式隐藏匹配元素。

需求描述：创建一个按钮，控制div缓慢淡出

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

$('button').click(function () {
    $('.box').fadeOut('slow');
});

3.3 fadeToggle()

方法描述：用淡入淡出动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制div淡入和淡出

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

$('button').click(function () {
    $('.box').fadeToggle('slow');
});

3.滑动

3.1 slideDown()

方法描述：用滑动动画显示一个匹配元素。

需求描述：创建一个按钮，控制div滑动显示

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: none;
}

<button>滑动显示</button>
<div class="box"></div>

$('button').click(function () {
    $('.box').slideDown();
});

3.2 slideUp()

方法描述：用滑动动画隐藏一个匹配元素。

需求描述：创建一个按钮，控制div滑动隐藏

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

$('button').click(function () {
    $('.box').slideUp();
});

3.3 slideToggle()

方法描述：用滑动动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制div滑动显示和滑动隐藏

.box {
    width: 200px;
    height: 200px;
    background: coral;
    display: block;
}

$('button').click(function () {
    $('.box').slideToggle();
});

3.6 自定义

animate()

方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用。

需求描述：创建一个div，默认div宽高100px，背景颜色为黑色，先让div宽度变为200px，再让div高度变为200px

width: 100px;
height: 100px;
background: black;
}

<button>自定义动画</button>
<div class="box"></div>

$('.box')
.animate({
width: '200'
})
.animate({
height: '200',
});

动画