怎样把在js里面将元素缓慢显示

JavaScript020

怎样把在js里面将元素缓慢显示,第1张

你好，你可以  引用  js   里 jQuery 库.

引用了 百度的 jquery.min.js 。如下

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

 

    $("#div3").fadeIn(6000)

  })

})

</script>

</head>

<body>

<button>Click to fade in boxes</button>

<br><br>

<div id="div3" style="width:80pxheight:80pxdisplay:nonebackground-color:blue"></div>

</body>

</html>       

v-show是通过其值为true或者false来决定所包含的元素是否显示。举例如下：

HTML：

<div id="app"> <p v-show="ok">123</p></div>

JavaScript（Vue）：

var vm = new Vue({el: '#app',data: {ok: true}})

默认情况下运行结果会在页面上显示这个p元素，也就是会出现123字符串。

当我们在控制台中使用vm.ok = false将其值设置为false后。123字符串将立即消失，即p元素被隐藏了。

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 方法一： document.getElementById("EleId").style.visibility="hidden" document.getElementById("EleId").style.visibility="visible" 　利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。 方法二： document.getElementById("EleId").style.display="none" document.getElementById("EleId").style.display="inline" 利用上述方法实现隐藏后，页面的位置不被占用。