<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.message{
position: fixed;
top: -50px;
left: 50%;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #00aaee;
color: #fff;
box-sizing: border-box;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="message">hello</div>
<button id="btn">btn</button>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function fade(text){
$('.message').html(text);
//.css無動畫過渡效果
// $('.message').css({
// top: "50px",
// })
// setTimeout(() => {
// $('.message').css({
// top: "0"
// })
// },2000)
// .animate有動畫過渡效果
$('.message').animate({
top: "50px"
})
setTimeout(() => {
$('.message').animate({
top: "-50px"
})
},2000)
}
$('#btn').click(() => {
fade("hello")
})
</script>
自定義彈出層.css 和 .animate的區別
相關文章
- 自定義動畫方法animate()動畫
- jQuery實現的自定義可以拖動的彈出層效果jQuery
- jQuery動畫—自定義動畫animate()jQuery動畫
- 自定義popup彈出框
- transition、transform、animate的區別?ORM
- Glide 知識梳理(4) 自定義animateIDE
- 純CSS彈出層,城市切換效果CSS
- 棧(Stack) --- C# 自定義和微軟官方的區別C#微軟
- iOS實現自定義的彈出檢視(popView)iOSView
- css滑鼠懸浮彈出說明層效果CSS
- 基於Vue.js PC桌面端彈出框元件|vue自定義彈層元件|vue模態框Vue.js元件
- animate.css的使用CSS
- 自定義 IE 滑鼠右鍵彈出式 (轉)
- avalonia自定義彈窗
- 自定義 alert 彈窗
- bootstrap – 彈出層boot
- win10右鍵選單彈出方向怎麼自定義_win10如何自定義右鍵選單彈出方向Win10
- vue-cli 自定義路徑別名 assets和static資料夾的區別 --save-dev和--save的區別Vuedev
- AngularJS自定義Directive中link和controller的區別AngularJSController
- 四層和七層負載均衡的區別負載
- 自定義版本更新彈窗
- 自定義view————廣告彈窗View
- iOS 自定義內容的彈窗iOS
- 34.qt quick-Popup彈出視窗自定義QTUI
- JXPopupView:一個輕量級的自定義檢視彈出框架View框架
- jQuery拖拽的彈出層效果jQuery
- css自定義屬性和聚光燈效果CSS
- Vue整合Animate.cssVueCSS
- jquery中css()與animate()jQueryCSS
- layui使用彈出層 關閉後彈層的內容又顯示出來UI
- CSS自定義屬性 —— 別說你懂CSS相對單位CSS
- css link和@import的區別CSSImport
- keras自定義網路層Keras
- Android自定義遮罩層Android遮罩
- uniapp 自定義彈窗元件APP元件
- 自定義彈幕控制元件控制元件
- CSS中定義CLASS時,中間有空格和沒空格的區別CSS
- 二層、三層交換機和四層交換機的區別(轉)