Little help Options

[Mikeplyts]

Well, I'm going to lighten this place up a bit. See, recently, I made a Tumblr and I used a pretty simple theme that I adjusted to my liking. There's just one thing I want to do it though and that's being able to make all my links fade in and out. Of course, I'm using the jQuery Javascript library to help me out on this but for some reason, I can't seem to get the links to work like I want them to. So, I might need some help.

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); });
    });
};

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>

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.

[fixtatik]

You shouldn't have to use the noConflict() function, since you're using a theme that doesn't use any of Tumblr's original code (all of the special tags are taken care of server side). You're probably having a problem because you're not declaring the plugin as an extension of jQuery.

Try something like this:

CODE

(function($) {
  $.fn.fade = function(settings) {
    settings = $.extend({
      color: '#A0A0A0',
      duration: 500
    }, settings);
    return this.each(function() {
      var original = $(this).css('color');
      $(this).hover(
        function() { $(this).stop().animate({ color: settings.color }, settings.duration) },
        function() { $(this).stop().animate({ color: original }, settings.duration) }
      )
    })
  };
  $(function() { $('a').fade({ color: '#F3F1F1', duration: 700 }) }
})(jQuery);

You were using $(this) in the plugin, which is a shortcut for jQuery(this). To use it as $(this), you need to define the $ character to be used with jQuery (like above).

Also, notice the change I made to the plugin return. jQuery's .hover() is easier to use than .mouseover() and .mouseout(). It takes two functions, separated by commas. The first function is when you hover over an element, and the second function is when you leave the element. I also added in .stop() before each animation. That stops the current animation if you hover over another element so the animation queue doesn't build up and keep firing.

You can use

CODE

$(function() {
// do stuff after the document loads
})

as a shortcut in place of

CODE

$(document).ready(function() {
// do stuff after the document loads
})

I'd also suggest using a packed version of jQuery; unpacked is enormous and a burden on both your server and people trying to view the page. Google has a packed, gzipped and cached version of jQuery 1.4.1 here. If someone was on another site that used the Google cached version, then it'll already be loaded when they visit your Tumblr.