青叶个人博客的第一个JQ插件，在此奉上，希望大家能够用得上，经过一些测试，在使用上是没有什么太大问题的，但毕竟是个人的初次JQ插件编写，一些技术上的细节可能并不成熟，也许也有一些未知的bug，如果大家在使用插件的过程中发现了可优化的地方，请一定在博客中留言告知，多谢！好了，废话不多说了，插件奉上。
插件名：myAnimate
插件功能：指定需要运用动画的DOM元素，当该元素（或一些元素）到达浏览器的可视区域时，执行你自己定义好的动画。（css动画博大精深，故此插件中并没有写具体的动画效果，也不可能写完，所有的动画效果都需要自行编写，这也使得插件的可扩展性更强）
插件使用：
$(“yourAnimateElement”).myAnimate({
animateClass: “demo”
})
提供接口：
animateClass：”demo”, //自己编写动画的名称
opacty: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px屏幕以下不执行动画
ieAnimate: true //IE动画 选填 默认为false关闭IE动画
温馨提示：由于具体的动画效果需要自行定义，故在编写css动画的时候，请一定要注意css动画兼容性。
具体代码以及demo：
/**通用动画jQuery插件 jQuery-animate.js 功能：元素进入可视窗口，执行动画class，动画class效果自行编写
made by 青叶 in 2018.10.29
插件使用：$('yourAnimateElement').myAnimate({ animateClass: 'demo'});
代码分析： 1.ifIE() 根据调用者的要求决定是否开启IE浏览器的动画效果
2.ifWinWidth() 分析用户浏览设备的屏幕宽度，根据插件调用者自定义的设备宽度，判断在什么设备上执行动画
3.bindEvent（） 对window绑定scroll事件，出于性能方面的考虑，采用闭包节流的方式控制
4.mainAnimation() 主要的动画代码
5.destructor() 动画执行完毕，销毁绑定的scroll事件，优化性能
*/
(function ($) {
function MyAnimate(el, opts) {
this.init(el, opts);
}
MyAnimate.OPTS = {
animateClass: 'demo', //动画class 必填 否则没有动画效果
opacity: 1, //初始透明 选填 默认为1
animateRestrict: 1200, //动画限制 选填 默认为1200px，即以设备宽1200px及以上可以显示动画
ieAnimate: false //IE动画 选填 默认为false，即默认关闭IE动画，为true则开启IE动画，注意css3的兼容性
};
MyAnimate.prototype.init = function (el, opts) {
this.$el = $(el);
this.opts = $.extend({}, MyAnimate.OPTS, opts);
this.$win = $(window);
this.ifIE();
};
MyAnimate.prototype.ifIE = function () {
if (this.opts.ieAnimate===false) return false;
else this.ifWinWidth();
};
MyAnimate.prototype.ifWinWidth = function () {
if (this.$win.width() >= this.opts.animateRestrict) {
this.bindEvent();
this.mainAnimation();
}
};
MyAnimate.prototype.bindEvent = function () {
var _this = this,
timer = null;
this.fn = function () {
if (timer) return;
timer = setTimeout(function () {
_this.mainAnimation();
timer = null;
}, 150)
};
this.$win.on('scroll', this.fn) //window绑定事件scroll
};
MyAnimate.prototype.mainAnimation = function () {
var self = this,
$el = this.$el;
$el.css({opacity: self.opts.opacity}); //设定初始状态的透明度
$el.each(function () { //遍历所有未完成动画的元素
if (!this.loaded) {
if (inVisibleArea(this)) {
appear(this)
}
}
});
function inVisibleArea(elem) { //检测动画元素是否进入可视窗口
var $win = self.$win;
//滚动高度 + 可视区域高度 >= 元素到文档顶部的高度 结果为true 元素已经进入了可视区域，或者曾经进入过可视区域
return $win.scrollTop() + $win.height() >= $(elem).offset().top;
}
if (isAllLoaded()) { //全部动画完成，销毁绑定的scroll事件，优化性能
self.destructor();
}
function isAllLoaded() { //检测是否所有元素完成动画
return $el.length === 0
}
function appear(elem) { //可视窗口，执行动画，剔除已经完成动画的元素，避免重复遍历循环，优化性能
// $(elem).css("animation", self.opts.animateName + " " + self.opts.duration + " " + self.opts.timingFunction + " " + self.opts.delay + " " + self.opts.iterationCount + " " + self.opts.direction + " " + self.opts.fillMode);
$(elem).addClass(self.opts.animateClass);
elem.loaded = true;
var tmp = $.grep($el, function (elem) { //剔除已经完成动画的元素，避免重复遍历循环，优化性能
return !elem.loaded;
});
$el = $(tmp)
}
};
MyAnimate.prototype.destructor = function () { //当所有动画完成 销毁绑定的事件 优化性能
this.$win.off('scroll', this.fn)
};
//业务代码完成
$.fn.extend({
myAnimate: function (opts) { //myAnimate 外部调用插件名
new MyAnimate(this, opts);
return this;
}
})
})(jQuery);
演示demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-animate-test1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="jQuery-animate.js"></script>
<style>
strong,h2{
display: block!important;
margin: 2% 0;
font-size: 24px;
}
.test1{
height: 500px;
border: 1px solid red;
}
/* 实际生产中注意@keyframes的兼容性 */
@keyframes animation_strong{
from{opacity:0;transform: translateY(100%)}
to{opacity:1;transform: translateY(0)}
}
.demoH2{
-webkit-animation: animation_strong 1s 0s linear 1 normal forwards;
-moz-animation: animation_strong 1s 0s linear 1 normal forwards;
-o-animation: animation_strong 1s 0s linear 1 normal forwards;
animation: animation_strong 1s 0s linear 1 normal forwards;
}
@keyframes animation_p{
from{opacity:0;transform: translateY(100%)}
to{opacity:1;transform: translateY(0)}
}
.demoP{
-webkit-animation: animation_p 1s 0s linear 1 normal forwards;
-moz-animation: animation_p 1s 0s linear 1 normal forwards;
-o-animation: animation_p 1s 0s linear 1 normal forwards;
animation: animation_p 1s 0s linear 1 normal forwards;
}
</style>
</head>
<body>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
<strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
<p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<script>
$('.test1>h2').add('.test1>strong').myAnimate({
animateClass: 'demoH2',
opacity: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px，即以设备宽1200px及以上可以显示动画
ieAnimate: true //IE动画 选填 默认为false，即默认关闭IE动画，为true则开启IE动画，注意css3的兼容性
});
$('.test1>p').myAnimate({
animateClass: 'demoP',
opacity: 0, //初始透明 选填 默认为0
animateRestrict: 0, //动画限制 选填 默认为1200px，即以设备宽1200px及以上可以显示动画
ieAnimate: true //IE动画 选填 默认为false，即默认关闭IE动画，为true则开启IE动画，注意css3的兼容性
})
</script>
</body>
</html>
好了，JQ插件到这里就介绍完毕，如果大家在使用过程中发现有什么问题，请在此留言告知，将尽快修改。谢谢！更多插件尽在青叶博客！