fadein | 易学教程

jQuery: fade in/out + animate elements

阅读更多关于 jQuery: fade in/out + animate elements

问题 I'm using jQuery to fade in/out some elements and change the opacity of the others. $(function(){ $('.image').each(function() { $(this).hover( function() { $(this).stop().animate({ opacity: 0.3 }, 'slow'); $(this).siblings().fadeIn('slow'); }, function() { $(this).stop().animate({ opacity: 1 }, 'slow'); $(this).siblings().fadeOut('slow'); }) }); }); You can see the full code at http://projects.klavina.com/stackoverflow/01/ (I'm also using the jQuery Masonry plugin on the page). I'm fairly new

CSS transition fade in only for element

阅读更多关于 CSS transition fade in only for element

问题 Is there a way to only fade in an element using the CSS transition property? Never really had the need for this before so haven't looked into it, and now I can't seem to find a method of doing so without resorting to JS. Is it possible to set transition to have an immediate return state? 回答1: There a couple ways to do this, depending on when you want your fade in to occur: jsFiddle /***** Fade in on a page load *****/ .fadeInLoad { border: 1px solid #48484A; font-size: 40px; animation:

How to animate elements move with css3 transitions after hiding some element

阅读更多关于 How to animate elements move with css3 transitions after hiding some element

问题 Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut() ? I found some kind of solution here (see "It works for grids, too" section): However my case is more like this: http://jsfiddle.net/CUzNx/5/ <div class="container"> <div id="item1" class="item">Test1</div> <div id="item2" class="item">Test2</div> <div id="item3" class="item">Test3</div> <div id="item4" class="item">Test4</div> <div id="item5" class="item">Test5</div> <div id=

How to: javascript fade in fade out text

阅读更多关于 How to: javascript fade in fade out text

问题 First of all: I looked through other posts on stackoverflow and none of them had the information I was looking for. Second: I'm new to programming ;) I want to have a div on my website that fades in and fades out text. I've seen this on a few web sites and am pretty sure it is javaScript using the jQuery library. Does anyone know of a good tutorial, or can tell me how to accomplish this? 回答1: Here you go :) http://api.jquery.com/category/effects/ Click on the effects you want, there are demos

fade in and fade out in pure javascript without jquery

阅读更多关于 fade in and fade out in pure javascript without jquery

问题 Here I have a function that fades a square box with id="box" as soon as the page loads. I tried but failed to find out how to fade in the box again or simply how to fade in a box or an element with pure JavaScript not jQuery. Here is my code for fadeOut() function: var box = document.getElementById('box'); function fadeOut(elem, speed) { if(!elem.style.opacity) { elem.style.opacity = 1; } setInterval(function(){ elem.style.opacity -= 0.02; }, speed /50); } fadeOut(box, 2000); #box { width:

Add fade-in or fade-out on the addclass / removeclass event

阅读更多关于 Add fade-in or fade-out on the addclass / removeclass event

I am a beginner, please don't be to rough with me. I created an addclass and removeclass event : $(".myclass").click(function(){ $(".hiding").removeClass("hiding"); $(this).addClass("hiding"); }); This is the CSS : #wrapper a.hiding { display: none; } And the HTML : <div id="wrapper"> <a class="myclass" href="#2"> <img src=""> </a> </div> So for the moment, it works fine, but I would like to add a fade-in action when addclass, and fade-out when removeclass I tried by the CSS using -webkit-transition: all 0.5s ease; But it's not working. I recommend you try this edit: I realized just now using

How can I force Jquery animations to occur when the window is not focused

阅读更多关于 How can I force Jquery animations to occur when the window is not focused

问题 Okay, So I am building an ajax based game. Anyway it is multiplayer, connects to a server. It polls the server, getting updates all the time. Anyway the game has different game states, and must animate the GUI based on the game state. The problem is, however; When the window is not focused, jquery animations queue up and do not render. This means say a user walks away for 5 mins and comes back, a huge queue of obsolete animations start to run through one by one. So I was wondering if there is

Simple javascript swap and fade in/out

阅读更多关于 Simple javascript swap and fade in/out

问题 I am looking for a javascript solution to simply make my SWAP action fade in and out rather than just appearing. Id like to strictly stick to some javascript instead of using jquery or any plugins. Heres the code that swaps the images on user click, just looking for a way to make them fade in and out: <script type="text/javascript"> // Image Swap // function swap(image) { document.getElementById("main").src = image.href; } </script> <body> <img id="main" src="image1.png" width="250"> <br> <a

Fade on hover text link color

阅读更多关于 Fade on hover text link color

Im trying to do a text link fade hover effect. Im trying to change the color through .css()-function. The colors are changing but the .fadeIn()-function doesn't work. What am I doing wrong and how do I solve it? $('#menu li a').hover( function() { $(this).css('color','#fff').fadeIn(); }, function() { $(this).css('color','#000').fadeIn(); } ); Kivylius .fadeIn() in will not fade in the text that from your .css() func. It's used with the .fadeOut() function, to show or hide a object on screen. To fade in a color change you need to use .animate() - this is a working example here using this plugin