[jQuery] A demo and an optimization question

[David Singleton]

Hi everyone,

First of all, jquery is pretty damn awesome and has made Javascript
fun.

I've been using jquery to build an icon picker for FAMFAMFAM's Silk
icon set. I've got a working version (at 
http://dsingleton.co.uk/code/icon-selector/),
but with 1000 images on the page everything is a little slow, i'm
wondering what I can do to optomize the JS make it a little snappier?

(This is also the first time i've used jquery for anything
substantial, so any tips, suggestions or corrections would be much
appreciated!)

$(document).ready(function() {

        // Add preview
        $('div.primary').before(
                '<div class="preview"> \
                        <h2>Preview</h2> \
                        <img id="preview" alt="Hover on an icon for a preview " 
/> \
                </div>'
        );
        $('.preview').hide().fadeIn(1500);

        // Add Form
        $('div.primary').before(
                '<form action="" class="filter" autocomplete="off"> \
                        <h2><label for="search">Filter</label></h2> \
                        <input type="text" class="text" name="search" 
id="search" /> \
                </form>'
        );
        $('.filter').hide().fadeIn(1500);

        // All the icons, we'll be using this a lot
        var icons = $('ol.icons li a');

        // Add hover  previews (doesn't work on filtered out icons)
        icons.hover(function() {

                if ($(this).css('opacity') > .5) {
                        $('img#preview').attr('src', this.href);
                }
                return false;

        }, function() {
                // Remove hover afterwards
                if ($(this).css('opacity') > .5) {
                        $('img#preview').removeAttr('src');
                }
        });

        // Filtering search (with delay)
        var search_timer = false;
        $('#search').keyup(function() {

                // Clear timed events if we've have another key press
                if (search_timer) {
                        window.clearTimeout(search_timer);
                }

                var filter = this.value;
                search_timer = window.setTimeout(function () {
                        // If we match the filter word anywhere then full 
opacity,
                        // otherwise greyed out
                        icons.each(function() {
                                var opacity = (this.title.indexOf(filter) >= 0) 
? 1 : 0.1;
                                $(this).css('opacity', opacity);
                        });
                }, 300);
                return false;
        });
});

(Also at http://dsingleton.co.uk/code/icon-selector/icons.js )