Come hither.
I'm currently using the latest jQuery, jQuery 1.4.1, and I created a function in a separate Javascript file called fade.js.
Here's fade.js:
CODE
jQuery.fn.fade = function(settings) {
settings = jQuery.extend({
color: '#A0A0A0',
duration: 500
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};
settings = jQuery.extend({
color: '#A0A0A0',
duration: 500
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};
and here's the little Javascript I'm using on my main Tumblr page:
CODE
<script type="text/javascript">
$(document).ready(function() {
$('a').fade({
color: '#F3F1F1',
duration: 700
});
});
</script>
$(document).ready(function() {
$('a').fade({
color: '#F3F1F1',
duration: 700
});
});
</script>
I've also tried using a class in the Javascript (i.e. - .fade) which was used in some test links but that didn't work either.
I don't know if it's a conflict with where I have the files hosted (my own site) and if it should be hosted on Tumblr (which I don't think I can do, or I don't know how) and I noticed Tumblr uses Prototype so I don't know if that would be issue (because I'm pretty sure jQuery and Prototype do not work well together, however, I don't see any Prototype files included on my page).
It's been quite annoying and I'd appreciate it if someone could lighten my day with some mystical solution. And with that, I bid adieu.
