fade

好看的404页面

拜拜、爱过 提交于 2019-11-28 07:19:24
网上搜索到的一个比较好看的404页面,这里做下记录。 html 代码 <html lang="en"> <head> <meta charset="utf-8"> <title>404</title> <link href="../static/css/sugar/404.css" rel="stylesheet" type="text/css"/> </head> <body> <svg class="me404" viewBox="0 0 1000 480"> <path id="cloud" class="st0" d="M658.4,345.2c-10.9,0-19.7-8.8-19.7-19.7c0-10.9,8.8-19.7,19.7-19.7h50.1c9.9-1.5,17.5-10,17.5-20.3 c0-11.4-9.2-20.6-20.6-20.6v-0.2H633c-11.4,0-20.6-6.7-20.6-18.1c0-11.4,9.2-19.3,20.6-19.3h70.4l2-0.2c7.3-3.1,12.5-11,12.5-19.5 c0-8.5-4.2-16.7-11.4-19.2l-2.5-0.3h-11.3c-11.9,0-21.6-8.9-21.6-19.9c0-11,9.7-19.9,21.6-19.9h15.8l1.4-0.3 c8.6

jQuery fading two images without white

僤鯓⒐⒋嵵緔 提交于 2019-11-28 05:27:30
问题 I would like to fade image without white transfer between them. HTML: <div class="image"> <span><img src="1.jpg"></span> </div> jQuery: $('.image > span > img').fadeOut(1000, function() { $('.image > span > img').attr('src', images[i]); $(this).fadeIn(1000); }); This works, but there is white fade between changing. Images array contains image sources. I found this http://jsfiddle.net/byB6L/ but I can not update my code to work with that. 回答1: This is because your using the same image on the

Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

被刻印的时光 ゝ 提交于 2019-11-28 05:20:14
I'm trying to get a nice fade-out effect at the bottom of a section of text as a 'read more' indicator. I've been following a bit off this and other tutorials, and my code currently is as follows: html <section> <p>malesuada fames ac turpis egestas...leo.</p> <p>malesuada fames ac turpis egestas...leo.</p> <div class="fadeout"></div> </section> <p>Stuff after</p> css .fadeout { position: relative; bottom: 4em; height: 4em; background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); } jsFiddle The problem is, even when I position the transparent div over the

jQuery fade flickers

断了今生、忘了曾经 提交于 2019-11-28 04:58:43
问题 I have jQuery fade going here: http://dougie.thewestharbour.com/ When you hover over the .main-overlay div I would like it to fade out then when you take your mouse off of it, I would like it to fade back in. However, you can see it's just flickering right now. I'm guessing it's because the div disappears so it's treated as a mouseout when it's faded out but I'm not sure how to go about solving it. Here is my javascript: $(document).ready(function () { $('.main-overlay').hover( //Mouseover,

jQuery Change Image src with Fade Effect

谁说胖子不能爱 提交于 2019-11-28 04:39:54
I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using: $(".thumbs a").click(function(e) { e.preventDefault(); $imgURL = $(this).attr("href"); $(".boat_listing .mainGallery").fadeIn(400, function() { $(".boat_listing .mainGallery").attr('src',$imgURL); }); }); This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work? You have to make it fadeOut() first, or hide it. Try this : $(".thumbs a").click(function(e) { e

Using fadein and append

一个人想着一个人 提交于 2019-11-28 03:03:34
I am loading JSON data to my page and using appendTo() but I am trying to fade in my results, any ideas? $("#posts").fadeIn(); $(content).appendTo("#posts"); I saw that there is a difference between append and appendTo, on the documents. I tried this as well: $("#posts").append(content).fadeIn(); I got it, the above did the trick! But I get "undefined" as one of my JSON values. If you hide the content before you append it and chain the fadeIn method to that, you should get the effect that you're looking for. // Create the DOM elements $(content) // Sets the style of the elements to "display

Fade Effect on Link Hover?

ⅰ亾dé卋堺 提交于 2019-11-28 02:41:12
on many sites, such as http://www.clearleft.com , you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action. I assume JavaScript is used to create this effect, does anyone know how? Nowadays people are just using CSS3 transitions because it's a lot easier than messing with JS , browser support is reasonably good and it's merely cosmetic so it doesn't matter if it doesn't work. Something like this gets the job done: a { color:blue; /* First we need to help some browsers along for this to work. Just because a

Simple fade in fade out div with jquery on click

跟風遠走 提交于 2019-11-27 22:23:26
THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference. HTML : <div><a href="#" id="btn">Show bank div and hide fancy div</a></div> <div id="btn-bk"><a href="#">back</a></div> <div id="bank">Bank Div</div> <div id="fancy">Fancy Div</div> CSS : #bank {display:none;} #btn-bk {display:none;} Javascript : $('#btn').click(function(e){ $('#fancy, #btn').fadeOut('slow', function(){ $('#bank, #btn-bk').fadeIn('slow'); }); }); $('#btn-bk').click(function(e){ $('#bank, #btn-bk').fadeOut('slow', function(){ $('#fancy, #btn').fadeIn('slow'); }); }); Live DEMO

Fade edges of UITableView

北慕城南 提交于 2019-11-27 20:55:17
I've made a little research about my problem and unfortunately there was no solution for my problem. The closest was Fade UIImageView as it approaches the edges of a UIScrollView but it's still not for me. I want my table to apply an "invisibility gradient" on the top. If the cell is at a 50px distance from the top edge it starts to vanish. The closer it is to the upper edge, the more invisible the part is. The cells height is about 200 pixels, so the lower part of the cell need to be visible in 100%. But nevermind - I need a table view (or table view container) to do this task, because

Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

[亡魂溺海] 提交于 2019-11-27 19:17:17
问题 I'm trying to get a nice fade-out effect at the bottom of a section of text as a 'read more' indicator. I've been following a bit off this and other tutorials, and my code currently is as follows: html <section> <p>malesuada fames ac turpis egestas...leo.</p> <p>malesuada fames ac turpis egestas...leo.</p> <div class="fadeout"></div> </section> <p>Stuff after</p> css .fadeout { position: relative; bottom: 4em; height: 4em; background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba