本文主要是介绍javascript与jQuery对比之淡入，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用原生的js写淡入淡出才会发现jQuery帮助做了多少事，例如浏览器的兼容问题，并且不用组织多个DOM属性方法复杂的实现一个功能。用jQuery只需使用fadeIn()方法，参数可以控制透明度，切换效果及回调函数，很方便。
<pre name="code" class="html"><style>
.box{
width:100px;
height:100px;
border:1px solid black;
}
</style>
<body><button id="jQuery">jQuery</button><div class="box" id="box1" style="background-color: blue;display:none;"></div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>$("#jQuery").click(function () {$("#box1").fadeIn();});
</script>
</body><pre name="code" class="html"><pre name="code" class="html"><style>
.box {width:100px;height:100px;border:1px solid black;}
</style>
<body><button id="js">原生js</button><div class="box" id="box1" style="background-color: blue;display:none;"></div>
<script>
//解决浏览器兼容问题
function setOpacity(ele, opacity) {if (ele.style.opacity != undefined) {ele.style.opacity = opacity / 100;}else {ele.style.filter = "alpha(opacity=" + opacity + ")";}}
//淡入方法的具体实现
function fadeIn(ele, opacity, speed) {if (ele){var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;v < 1 && (v = v * 100);var count = speed / 500;var avg = count < 2 ? (opacity / count) : (opacity / count - 1);ele.style.display = 'block';setOpacity(ele, 0);var timer = null;timer = setInterval(function () {if (v < opacity) {v += avg;setOpacity(ele, v);}else {clearInterval(timer);}}, 100);}}window.onload = function () {document.getElementById("js").onclick = function () {fadeIn(document.getElementById("box1"), 100, 3000);}}
</script>
</body>
这篇关于javascript与jQuery对比之淡入的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
