[jQuery] fading
hi i am trying to ceate a page where one image fades in over another int the same position can anyone show me the code thanks jnf555
Re: [jQuery] fading
Show us yours, first :) On Thu, Dec 10, 2009 at 6:32 AM, jnf555 johnfrearson...@btinternet.comwrote: hi i am trying to ceate a page where one image fades in over another int the same position can anyone show me the code thanks jnf555 -- Charlie Griefer http://charlie.griefer.com/ I have failed as much as I have succeeded. But I love my life. I love my wife. And I wish you my kind of success.
[jQuery] Fading list items in one at a time
Basically what I am trying to do here is fade in all of the list items
of a given unordered list one at a time. Here's what I have so far,
but once I add the setTimeout (so that everything doesn't fade in
instantly) it goes completely fubar. Any suggestions on how I should
'wait' until the item is faded in to fade the next one? Thanks.
$('.masonryWrap li').hide();
var $i = 0;
while ( $i $('.masonryWrap li').length ) {
setTimeout(function() {
$('.masonryWrap li:eq('+$i+')').fadeIn('slow');
},
5000);
$i++;
}
[jQuery] fading issue in IE7 (works fine in FF)
Hi,
I'm having a problem with the fade in in IE7 using jQuery1.3.2 with
this simple event binding to 3 buttons. In IE when I first pressed any
of the button the fade in works, but after the initial fade in the
page loads, but does not fade in at all. I have no problem with this
in Firefox. Any help would be much appreciated.
$(function() {
$(#button1).bind(click, function() {
$(#loadhtml).fadeIn(slow).load(a.html);
});
$(#button2).bind(click, function() {
$(#loadhtml).fadeIn(slow).load(b.html);
});
$(#button3).bind(click, function() {
$(#loadhtml).fadeIn(slow).load(c.html);
});
});
input type=button id=a value=Show a.htmll /
input type=button id=b value=Show b.html /
input type=button id=c value=Show c.html /
div id=loadhtml/div
[jQuery] Fading Background AND Text, Navigation?
I'm after something like http://www.aplweb.co.uk/jQuery/Fade_background_menu_colour/ this Fading from grey to black however, i need the text to fade also, can this be done? That example just has the background fading. I need it fading from gray to black, whilst the text fades from black to white. Ideally in a valid li list navigation. Any ideas? :) -- View this message in context: http://www.nabble.com/Fading-Background-AND-Text%2C-Navigation--tp26101734s27240p26101734.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] fading images
Hi all,
I am trying to create a fading image swap for my body's background,
using jQuery.
Since I could not find out how to just fade a backgroundImage
(especially) on the body tag in the CSS, I created a #background tag
in my CSS looking like this:
#background {
width: 100%;
min-height: 100%;
height:auto !important;
height:100%;
background-image:url(../img/bgs/lightBlue.jpg);
background-repeat: repeat;
}
The whole background div wraps around all other divs,
so when fading the background div, my page is lost. Which is not an
option.
So I tried creating a Class for the background div called .bg_image
losing the two background-* lines from the #background style.
The class lookes like this:
.bg_image {
background-image:url(../img/bgs/lightBlue.jpg);
background-repeat: repeat;
}
However fading only the class with jQuery will also end up in fading
the whole div.
again causing my page to get lost..
Since I am new at jQuery, can anyone help me out with the fading of
only a background image.
Is this in anyway possible, or do I have to write my own code.
My full stylesheet by the way looks like this:
@charset utf-8;
/* CSS Document */
body,html,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #00;
height:100%;
margin: 0;
padding: 0;
}
body {
background-color: #CC;
background-image:url(../img/bgs/curlyGrey.jpg);
background-repeat: repeat;
text-align: center;
}
#background {
width: 100%;
min-height: 100%;
height:auto !important;
height:100%;
background-image:url(../img/bgs/lightBlue.jpg);
background-repeat: repeat;
}
#distance {
width:1000px;
height:50%;
margin-bottom:-300px; /* half of container's height */
overflow: hidden;
}
#mainMovie {
position: relative;
top: 0px;
left: 0px;
height:600px;
width:1000px;
}
[jQuery] Fading IE Problems
Hi Everyone: For a client, I am attempting to get this site to work in IE and other web browsers (currently only works in Safari and Firefox for Mac): http://www.randomscripts.net/think_company_world/main.php I am using JQuery's fadeIn and fadeOut functions on the pictures to cycle them through in the background. I am wondering if anyone could take a look and tell me what's preventing this from running in browsers other then the two listed above. Thanks for any help!
[jQuery] Fading Out a Flash Object - Strange Behavior
I am trying to fade out a Flash embed object and fade in regular Html.
For some reason the callback of the fadeout method gets fired multiple
times, before the fade out has finished. The result is that the Html
gets appended multiple times in the callback function and it blinks an
extra time.
This doesn't happen when I try fading regular Html.
Is the fadeout function not meant to work with flash?
Html:
a id=HideFlash href=#Hide Flash/a
div id=FlashContainer
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=9,0,0,0
width=100 height=50 id=TEST align=middle
param name=allowScriptAccess value=sameDomain /
param name=allowFullScreen value=false /
param name=movie value=demo_banner.swf /
param name=quality value=high /
param name=bgcolor value=#ff /
param name=wmode value=transparent
embed src=demo_banner.swf quality=high
wmode=transparent bgcolor=#ff width=100 height=50
name=TEST
align=middle allowscriptaccess=sameDomain
allowfullscreen=false type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/div
div id=RegularContent
h1Before Fade/h1
/div
JQuery:
$('#HideFlash').click(function() {
$('#FlashContainer *').fadeOut('slow', function() {
$('#FlashContainer').append(p style='display:
none;'This is in the flash container/p);
$('#FlashContainer p').fadeIn('slow');
});
$('#RegularContent *').fadeOut('slow', function() {
$('#RegularContent').append(p style='display: none;'This is
in the regular content after fade/p);
$('#RegularContent p').fadeIn('slow');
});
});
[jQuery] Fading background images in and out
Hi, Just wondering what the best way to cycle (fade in and out) background images is? I´ve got to create a homepage with a navigation and nothing else but background images fading in and out behind it. I was going to use the Cycle plugin for Jquery, but it means I need to create a div with images in it and I can´t seem to keep them in the background only (i.e. the z-index doesn't work). Any ideas of how to keep the images only in the backgroun/stop them obscuring other elements on the page? Thanks osu
[jQuery] Fading text in/out (like a text slideshow)
I have a small portion of a page which will contain a set of animated
text snippets. Item one will appear immediately, then fade out; item
two will fade in, pause, then fade out, etc. At the end of the
sequence item one will appear again repeating forever. It's basically
a slideshow of styled HTML text.
I'm hoping to keep this simple, without the need for a big slideshow
plugin.
I wrote this:
$('#animatedQuotes').html(number one).fadeIn(2000).fadeTo(5000,
1).fadeOut(1000).html(number two).fadeIn(2000);
When this line is hit, the DIV changes to number two immediately.
Number two fades out and back in again as you'd otherwise expect.
How can I sequence this properly? I tried a a recursive callback from
the fadeOut, but apparently that's not something we can do (Javascript
threw an error).
Thanks!
[jQuery] Fading issues in Internet Explorer 7 when using jQuery
Hi, I'm using jQuery on a site that I'm working on and everything works as it should - except in Internet Explorer 7 (and previous versions, but the site doesn't support them). Fading content on the site simply won't show up in this browser. Take a look at http://dev.staffanestberg.com/fromsweden/ either in Safari or Firefox, then in IE7 and you'll see what I mean. I'm currently using the built-in effect FadeTo for fading the content, but I've also tried creating custom effects as well as using both Show/Hide, Animate and FadeUp/FadeDown. I'm using SWFaddress on this site which might cause a conflict with jQuery, but wouldn't that show up in other browsers as well? What am I missing here? -Staffan -- View this message in context: http://www.nabble.com/Fading-issues-in-Internet-Explorer-7-when-using-jQuery-tp22548538s27240p22548538.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] fading rollovers causing problems in IE6 and IE7
I've used the code provided by, http://jqueryfordesigners.com/image-cross-fade-transition/ Here's the site in question, http://www.hbportfolio.net/clients/thestlnightlife/ Any idea why sometimes it would show both images underneath each other in IE6? It shows last image twice in IE6. And I think it shows double images for all in IE7. It's really weird... Any ideas? Thanks in advance! :)
[jQuery] Fading out the CONTENTS of a form field (ie: the value)
Hiya guys,
I've put together a basic handler for clicking on a field. It simply
empties the field for you when selected, and if you don't enter
anything it puts the default text back in:
$(#field_154038).focus(function () {
if ( $(this).val() == Please enter your postcode ) {
$(this).val();
}
});
$(#field_154038).blur(function () {
if ( $(this).val() == ) {
$(this).val(Please enter your postcode);
}
});
This works fine, but an additional nicety I tried to add was a fade in/
out. I've given it a stab but have been unable to work out how to
simply grab hold of the text contents of the field so it can be
manipulated.
If this is possible, could you please tell me how? :)
[jQuery] Fading images with jQuery
Hi,
I would like to fade 4 images with jQuery, 1.jpg, 2.jpg. 3.jpg. and
4.jpg
I have the following code, but no luck yet :(
script type=text/javascript src=jquery.js/script
script type=text/javascript
$(document).ready(function(){
for(i=1; i=4; i++) {
$(#app).html(img id='yass+i+' src='+i+.jpg')
$(#app).fadeIn(slow);
$(#app).fadeOut(slow);
}
});
/script
[jQuery] Fading image memory leak (what am I doing wrong?)
Hi,
So I have this script that copies a node, then uses an ajax call to
load a new image into the new node. Then once the image is done
loading, fades the old image out. After that, it removed the old node.
Works great on my mac, but IE has a horrible memory leak. I verified
the leak with DRIP. It's definitely is happening when this function is
being called. Any assistance would be spiffy.
function doImageSetup() {
var imgDiv = $(#image_div span.img_hold); // get target
var newish = imgDiv.clone(); // clone
newish.css(z-index, -1); // set it behind imgDiv
imgDiv.parent().prepend(newish); // append it to
newish.load(getimg.php, function(){ doImageFade(imgDiv,
newish);}); load image
}
function doImageFade(o, n) {
ni = n.children(img); // select image in new div
ni.load(function(){ // once the new image is finished loading
o.children(img).fadeOut(2000, function(){ // fade out old img
and then
o.remove(); // get rid of it
n.css(z-index, 0); // move new div forward
setTimeout(doImageSetup(), 1); // 10 second timer
});
});
}
[jQuery] Fading images 'slow' on mouseover
Hi there, Does anyone know of a way to have an image that when you rollover it, it fades into another image? Additionally, I would like the fade to be fast onmouseover and slow onmouseout. I have tried this lots of times and the issue that I keep getting is that I have to let the fades complete before you can initiate the fade again. In other words if I set onmouseout fade to 'slow' if I rollover the image again before this 'slow' fade has completed, nothing happens. I have to let the fade complete before you can rollover again. I would like to know if there is a way to interrupt the fade so that if it half complete, the fadeOut is stopped and immediately starts the fadeIn My pathetic attempts are: a href=http://www.pictureandword.com/test_platform/index.html;Here! /a And the .js file is: a href=http://www.pictureandword.com/test_platform/effects.js;Here! /a It is cluncky, to say the least. ANY help would be great. (Thanks to Ariel Flesher for trying to help me with this before, sorry, I'm just too stupid!) Thanks.
[jQuery] Fading effects and anti aliasing in IE/Opera
Hi Probably, everyone already noticed on this but when you use fade effects in IE/Opera where you change the opacity and stuff like that, the text on these browsers is poorly rendered. By other words, it's not anti-aliased. It only gets anti-aliased when the opacity is 100%. This doesn't happen on Firefox... Is there a way to workaround this problem or this is a *bug* in IE/ Opera that we can't do nothing about?
[jQuery] Fading a background image
HI Guys,
I'm trying to fadeIn the background image of an A tag (which is set to
display:blovk so effectively a div) when you roll over it. The A tags
form the main menu of a site I am designing.
I haven't managed to find any way of changing the Background Image
opacity using css so can't use the normal animate method.
I came up with one idea which was to wrap a coupld of block elements
inside each other. Each A tag would have the background image applied
and over the top of that there would be another block element with a
white background which I would fade out when I wanted the background
image to be visible.
The problem I have found is that when I fade the div with the white
background it also fades the contents, including the text of the menu
item.
Here is my Jquery.
$(.MyMenu a).hover(
function () {
$(this).children(.Fade).fadeOut(fast);
},
function () {
$(this).children(.Fade).fadeIn(fast);
}
);
Here is my CSS...
.MyMenu{}
.MyMenu a{display:block; background:url(MenuBack.gif) no-repeat right
center; text-align:right;}
.MyMenu a .Fade{display:block; background-color:White;}
.MyMenu a .Text{display:block; padding:4px 28px 5px 0;}
And here is the HTML..
div class=MyMenu
a href=#span class=Fadespan class=TextSummary/
span/span/a
a href=#span class=Fadespan class=TextFull
Description/span/span/a
a href=#span class=Fadespan class=TextCompare
Specs/span/span/a
a href=#span class=Fadespan class=TextImages amp;
Video/span/span/a
a href=#span class=Fadespan class=TextUser
Reviews/span/span/a
/div
Can anyone htink of an easier way to do this, or a better way
altogether ?
Jon
[jQuery] fading image replace?
I have a webcam, currently uploading images as per motion detection.
The latest image is always called Webcam.jpg, the next most recent is
Webcam1.jpg, etc.
I'd like to show the latest few, and replace each with the latest version of
the file every minute or so.
I can simply update the src (using a changing URL variable to avoid caching
issues), but I'd rather the new file be faded in, but am unsure where to
start.
My current code only replaces one image:
lt;img id=main src=/images/Webcam.jpg /
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
function refreshImg() {
interval = 6; // 1 min
var tmp = new Date();
tmp = '?nocache=' + tmp.getTime();
$('#main').attr('src','/images/Webcam.jpg'+tmp);
setTimeout(refreshImg(), interval);
}
$(document).ready(function(){
refreshImg();
});
/script
Clearly, this isn't the best code ever, but it is functional, and this isn't
for anything more than personal use ATM.
Any advice will be much appreciated.
--
View this message in context:
http://www.nabble.com/fading-image-replace--tf4551015s27240.html#a12987612
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Fading element opacity problem using Interface FX!!!
I'm using Interface Elements jQuery plugin to have some extended
animation functions that I need, some are working, ie: $
(this).animate({ color: '#ff' }, 200);, some are not.
I don't have full javascript interface.js file included, only the
ifx.js. However, I tried to include ifx.js + easing.js and also
interface.js without any other interface js file cause this one has
everything. However, none of them worked with the following code:
$('div#cpblock').animate({opacity: hide}, 3000);
The element is hidden after 3secs but I don't see it fading out.
The error from Firebug is this:
jQuery.easing[options.easing] is not a function
http://localhost/scripts/Administratio/scripts/jquery.js
Line 2454
What's the problem? Why does A work and B doesn't?
A: $(this).animate({ color: '#ff' }, 200);
B: $('div#cpblock').animate({opacity: hide}, 3000);
[jQuery] Fading links from one color to another (like Mootools)
Hi, I'm a newbie at jQuery and basic/average JavaScript coder. Recently, I was talking to a friend, asking which JavaScript framework does he use or will use in his CMS project and he mentioned Mootools and Prototype (I'm not here to discuss them). Well, I knew Prototype, but not Mootools, so I decided to check their webpage to see if I would choose it over jQuery. Well. I don't want to use Mootools, jQuery seems easier to learn and use, however, I noticed Mootools has some neat effect that I would like to use, or better, I would like to implement with jQuery. Which is, link color fading. How do I implement something like that with jQuery?
[jQuery] Fading in Firefox?
This is probably another simple one. (I searched the archive but didn't see
anything-maybe I'm not searching well.)
I can't get the Fade effect to work in Firefox, though it does work in IE.
In Firefox the element just disappears suddenly rather than fading out.
Code below:
$('#podContainer:visible').fadeOut(1000, function(){
$('#content').animate({className: 'contentWide'},1000);
});
