Does anyone know of a lightweight (small file size) HTML background color fader?
Something like the below pseudo-JavaScript
fadeDiv('div_element_to_fade','hex_start_color','hex_end_color','speed_of_fade');
views:
81answers:
3
A:
You could use this solution.
This uses jquery. I highly recommend that you start using this instead of plain javascript
Another solution:
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
To call it how you want:
function animateColorsCustom(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
}
function otherFunction(){
animateColorsCustom();
}
marcgg
2009-11-07 19:11:26
I'm fine with using JQuery but, I need to make it a callable function (not using a hover). How do I make this a callable function and not an animate on a hover action?
AndyT
2009-11-07 19:15:07
I'm also not clear on how the color fade work. Let's assume I have a white background. What I want to have happen is the background color of my div immediate turns yellow, then fades back to the original background color of white. How would I do this as well? (Thanks in advance)
AndyT
2009-11-07 19:16:07
instead of calling the function on hover, call it on whatever trigger you want
marcgg
2009-11-07 19:16:10
take a look at the new example I posted. I don't get your issue with how to call the function. Once the function is defined, you can call it how you want
marcgg
2009-11-07 19:16:49
Looks like you changed your code. You new code now assumes I going to use a "click" to initiate the action to fade the background color. I simply want to programmatically call a function to make the DIV background color to fade. Make sense?
AndyT
2009-11-07 19:18:36
In case this helps, the "trigger" is my having it in my code to programmatically call.
AndyT
2009-11-07 19:20:07
Am I making sense?
AndyT
2009-11-07 19:21:53
I added some code. Does this makes sense? This is basic javascript, but let me know if you have trouble getting what I'm trying to do.
marcgg
2009-11-07 19:22:16
@AndyT - Do you mean you want to do it when the page loads? You want it to just happen? There is an onLoad functionality (or document ready in JQuery). Is that what you mean?
JasCav
2009-11-07 19:23:03
of course here you can pass a parameter to change a specific element. You can also pass colors and so on... it's up to you to tweak it to make it exactly how you want it;
marcgg
2009-11-07 19:23:29
In your second example, would I replace ".block" with "#my-div" that I want to change the background for?
AndyT
2009-11-07 19:30:43
I've tried you code on my live site and it doesn't do anything, so I'm trying to find my issue
AndyT
2009-11-07 19:31:15
Also, do I need to include any JQuery plugins to make this work beside just having the JQuery core library?
AndyT
2009-11-07 19:33:42
Yes, if "my-div" is the id of the div you want to change. If you have the website live, send the url over maybe I could help you better.
marcgg
2009-11-07 19:33:59
Take a look at selectors if you're not already familiar with them. This is important: http://docs.jquery.com/Selectors
marcgg
2009-11-07 19:34:30
Thanks marcgg, I've updated my original post to include both a working site that uses some old klugy code and a copy of the site using your code (which I can't get to work). I want to the left window panel to fade to yellow and then back to the original color whenever a new house if found on the map
AndyT
2009-11-07 19:38:34
I've put your code in a function called "fadeBackgroundColor" to help you look at my code
AndyT
2009-11-07 19:39:17
dragging the map should flash the background color (animate) from yellow to the original color of white.
AndyT
2009-11-07 19:41:40
What about using ... $("#my-div").effect("highlight", {}, 3000); ?
AndyT
2009-11-07 19:49:54
Highlight will do the trick, but this is not fading. Take a look at jquery UI for a list of the animations you could use: http://jqueryui.com/docs/Effects/Methods
marcgg
2009-11-07 19:54:02
highlight will require me to include the Effect core. The original post was to find a lightweight approach to doing this. I'm already using JQuery core on the page, so animate was no extra overhead. How can I do this with animate as your answer above indicates because it's not working for me. Have you been able to look at my code (please, see my updated original post)
AndyT
2009-11-07 19:59:28
Looks like you just copied you code from the JQuery web site and forget to tell me I need to include the Color Animation plugin --> http://docs.jquery.com/Release:jQuery_1.2/Effects Which totally defeats my questions since I'm looking for a LIGHTWEIGHT css color fader :(
AndyT
2009-11-07 20:32:38
+1
A:
Maybe my answer is a bit OFF, but, If I were you, I'd definitely go with the JQuery way
Soufiane Hassou
2009-11-07 19:12:10
A:
Try this Background Fade or this Background Fader or this Fade The Background Color
priyanka.sarkar
2009-11-08 05:37:30