fade | 易学教程

Fade in element by setting opacity with Javascript

阅读更多关于 Fade in element by setting opacity with Javascript

问题 I have decided to create a fade in animation effect using vanilla javascript. This is the code for my fade in effect: document.querySelector('.open-1_1').onclick = function() { document.getElementById('about-frame').style.display = 'block'; for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) { setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100) } }; What I am trying to do is incrementally increasing the opacity of the #about div from 0 to 1 by running

Fade out text on image

阅读更多关于 Fade out text on image

问题 I know how to fade out a text on a plain colored background with a CSS transparent gradient. But how is it possible to fade out a text on an image background? Here is an example of what I'd like: NB: I need a static effect just like the image (not a dynamic transition). 回答1: CSS mask-image is probably what you are looking for: div { background: #333; padding: 1em; } p { color: white; font-weight: bold; -webkit-mask-image: linear-gradient(to bottom, white, transparent); mask-image: linear

vue视频学习笔记06

阅读更多关于 vue视频学习笔记06

video 6 vue动画 vue路由 -------------------------------------- transition 之前属性 <p transition="fade"></p> .fade-transition{} .fade-enter{} .fade-leave{} -------------------------------------- 到2.0以后 transition 组件 <transition name="fade"> 运动东西(元素，属性、路由....) </transition> class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) 如何animate.css配合用？ <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show"></p> </transition> 多个元素运动: <transition-group enter-active-class=""

vue中的css 动画过渡效果

阅读更多关于 vue中的css 动画过渡效果

https://segmentfault.com/a/1190000018125564 很完善了，重点是两个过程图。 <style> .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } /* .fade-enter-to{ color: red; } .fade-leave{ color: green; } */ .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 3s; } </style> </head> <body>  <div id="root"> <transition name='fade'> <h1 v-show='show'> 最是年少时模样 </h1> </transition> <button @click='change'>切换</button> </div> <script> var vm

bootstrap简介

阅读更多关于 bootstrap简介

x下面我们做一个bootstrap的页面： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 8 <script src="dist/js/jquery-1.11.2.min.js"></script> 9 <script src="dist/js/bootstrap.min.js"></script> 10 <style type="text/css"> 11 @media (min-width:768px){.container{width:100%}} 12 @media (min-width:992px){.container

How do I get this fade animation to work?

阅读更多关于 How do I get this fade animation to work?

问题 I'm trying to set up a simple pulsating ring that will highlight a button, to prompt the user to the recommended choice. I made simple fadeIn() and fadeOut() functions, set a delay in the fadeOut(), so that it will trigger as the fadeIn() completes...or at least that's what I intended. What results is, when the button is pressed, the ring instantly goes to alpha = 1, then delays for 2 seconds, and then fades over 2 seconds. Once I have a cycle working, I'd like to put it into a loop to keep

Swift : Background Color fading animation (SpriteKit)

阅读更多关于 Swift : Background Color fading animation (SpriteKit)

问题 I'm creating a game, the background color is white to begin with hence: self.backgroundColor = SKColor.whiteColor() So when the game initiates white is the background. I have a scoring system, so essentially I want the colors to change when a certain score is reached hence: if score < 100{ enemy.runAction(SKAction.moveTo(mainBall.position, duration:3)) } else if score >= 100 && score < 200{ enemy.runAction(SKAction.moveTo(mainBall.position, duration:2.5)) self.backgroundColor = SKColor

change images on click

阅读更多关于 change images on click

问题 I found this code but I dont want to change by random. I dont know how to change images by order. Please help me! HTML <div class=change><img id=bg src="items/01.jpg" alt="" /></div> JQUERY : var images = ["02.jpg","03.jpg","01.jpg"]; $(function() { $('.change').click(function(e) { var image = images[Math.floor(Math.random()*images.length)]; $('#bg').parent().fadeOut(200, function() { $('#bg').attr('src', 'items/'+image); $(this).fadeIn(200); }); }); }); 回答1: You need to use index incremented

jQuery fadeOut one div, fadeIn another on its place

阅读更多关于 jQuery fadeOut one div, fadeIn another on its place

问题 I'm trying a simple jQuery script to fadeout one div and fadein another one in it's place but for some reason the first div never fades out. It's probably an obvious problem with the code but I cannot seem to make it out. <style> #cuerpo { display: none; } </style> <div id="cuerpo"></div> <div id="inicio"></div> <script> function delayed() { $("div").fadeIn(3000, function () { $("cuerpo").fadeIn("slow"); }); } $("a").click(function () { $("inicio").fadeOut("slow"); setTimeout("delayed()",500)

jquery fade effect not working in FF

阅读更多关于 jquery fade effect not working in FF

问题 This piece of code fades the div fine in IE. In Firefox 3.0.8, the fade time goes by and the div disappears instantly. I can't find anyone mentioning this problem. $(function() { $("#show").click(function() { $("#show").fadeOut('slow'); }); }); <div id="show">this is where to show it</div> 回答1: I've been banging my head against this problem all morning and finally found my problem... the header to "Scripts/jquery-1.3.2-vsdoc.js" /* * This file has been commented to support Visual Studio