fadein | 易学教程

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: 100px; height: 100px; background-color: blue; } <div id="box"></div> Many thanks in advance to

jQuery callback not waiting on fadeOut

阅读更多关于 jQuery callback not waiting on fadeOut

It seems to me the following code should produce these results: mademoiselle demoiselle mesdemoiselles Instead, as "ma" fades out, "mes" fades in making the sequence: mademoiselle madesdemoiselles mesdemoiselles The code: <span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span> $(document).ready(function() { $(".remove").fadeOut(4000,function(){ $(".add").fadeIn(5000); }); }); Edit: I found an empty span that if I remove makes the bug go away: <span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add"

Jquery: Fade multiple elements one after the other

阅读更多关于 Jquery: Fade multiple elements one after the other

问题 is there any possible solution, to fadeIn(500) multiple list elements one after the other? <ul id="list"> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> Kind Regards, Werner 回答1: You could do a recursive function that stops when there's no LI left like this: function fadeLI(elem) { elem.fadeIn(500, function() { fadeLI($(this).next()); }); } fadeLI($("#list li:first")); Check it out here 回答2: You want a recursive function to check if there is another li element,

jQuery show/hide - Question about the delay variable

阅读更多关于 jQuery show/hide - Question about the delay variable

I'm using the following code to show a box when you mouseover a certain div and have set the delay on the fade out but is there some way of cancelling the fadeOut effect if the user goes back on to the div? jQuery("#cart-box").hover(function() { jQuery("#cart-container").fadeIn('fast'); }, function( ) { jQuery("#cart-container").delay(800).fadeOut('fast'); }); Code for the divs <div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div> Thinking about it I think it's probably a case me needing to

jQuery hover : fading in a hidden div while fading out the “default” one

阅读更多关于 jQuery hover : fading in a hidden div while fading out the “default” one

问题 I have two divs (one of them hidden with CSS), which I'm fading in and out in alternance inside a common space, on hover. This is the markup : <div id="wrap"> <div class="image"> <img src="http://domain.com/images/image.png"> </div> <div class="text hide"> <p>Text text text</p> </div> </div> And I was applying this jQuery code to fade out the image - and fading in the text, on hover : <script type="text/javascript"> $(function(){ $('#wrap').hover( function(){ $('#wrap .image').fadeOut(100,

jQuery - How to fade in/out from one color to another? (possible 3rd party plugin fo jQuery?)

阅读更多关于 jQuery - How to fade in/out from one color to another? (possible 3rd party plugin fo jQuery?)

I'm looking for a jQuery script or a 3rd party plugin for jQuery, which can create a fade in/out effect based on "from color" and "to color". Example how I see it: $( selector ).fadeColor({ from: "#900", // maroon-red color to: "#f00", // blood-red color }, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds jQuery UI extends jQuery's animate method to include colour animation. You can then do something like: $("#someId").animate({backgroundColor: "#ff0000" }); Here's a working example . You don't need another plugin. Example: jQuery $

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 any way to force jquery animations to run when they are called and not wait for a focused window? For

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 href="image1.png" onclick="swap(this); return false;"><img width="50" src="/image1.png"></a> <a href=

jQuery AJAX using fadeIn + replaceWith

阅读更多关于 jQuery AJAX using fadeIn + replaceWith

There are several q & a's on SO on this but I found none that address my issue. And I'm stumped with this. Please redirect me to a link if you know of an available answer to this. My page has an empty DIV #posts_insert in which new posts are inserted via Ajax. $.ajax({ url: 'chat/posts_submit/' + <?php echo $page_id; ?>, type: 'POST', data: $('#posts_form').serialize(), dataType: 'html', success: function(html) { $('#posts_insert').replaceWith(html); } }); I want that new post to fade in, replacing #posts_insert . I've tried several iterations on success using hide() prior to fadeIn but I just