image rollover over, and animation help needed jquery
<p>I have tested my two features separately, but when I put them together they do not work. One is an image rollover that allows the user to mouseover and see a larger image. The other is a simple animation that changes orange to black around around an image border. I would also like to know if anyone has any ideas on how to get the images to not lose their pixelization when making them larger. This is done dynamically, so I cannot make two images for each image. Thanks in advance. Here is my code. The page will eventually have up to 250 rows of images on it. </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
.container {
    width: 400px;
    position: absolute;
    margin-top:40px;
    margin-left:40px;
}
ul.thumb {
    float: left;
    list-style: none;
    width: 400px;
}
ul.thumb li {
    float: left;
    position: relative;
    width: 80px;
    height: 60px;
}
ul.thumb li img {
    width: 80px; height: 60px;
    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic; 
}

.images {
    border: 5px solid;
}
&lt;/style&gt;

&lt;/style&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
 &lt;script src="http://ditio.net/wp-content/uploads/2010/01/jquery-resize.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt; 
$(document).ready(function(){

 $(".images").each(function setAnim() {
          $(this).      
                    animate({
                        borderTopColor:'orange',
                        borderRightColor:'orange',
                        borderBottomColor:'orange',
                        borderLeftColor:'orange',
                        }, 1000).
                        animate({
                        borderTopColor:'black',
                        borderRightColor:'black',
                        borderBottomColor:'black',
                        borderLeftColor:'black'}, 1000, setAnim);
                         });

});
//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-80px', 
            marginLeft: '-80px', 
            top: '50%', 
            left: '50%', 
            width: '160px', 
            height: '120px',
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '80px', 
            height: '60px', 
        }, 400);



});
&lt;/script&gt; 
&lt;/head&gt;

&lt;body&gt;
&lt;div class="container"&gt;
&lt;ul class="thumb"&gt;

    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/desert.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/flower.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/jellyfish.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;


&lt;/ul&gt;
&lt;ul class="thumb"&gt;

    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/desert.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/flower.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="test.html"&gt;&lt;img src="images/jellyfish.jpg" class="images" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;


&lt;/ul&gt;

&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>
