I have an problem to get my jQuery code working with D7...in HTML it works fine but with D7 it doesnt work at all...

the code:

(function ($) {

Drupal.behaviors.exampleModule = { attach: function(context, settings) {

    var thumbstart = $("ul li img");        
    
    for (var i = 0, ii = thumbstart.length; i < ii; i++){
        if (thumbstart[i].title && thumbstart[i].title.length > 0)
        {           
            var imgtitle = thumbstart[i].title;     
            $(thumbstart[i]).wrap('<div class="wrapper" />').               
            after('<div class=\'inner\'><span class=\'caption\'>' + imgtitle + '</span></div>').
            removeAttr('title');
                                        
        }                   
    };
// At here the code works fine...
$('.wrapper').find('img').css({opacity: ".8"}); 
$('.teaser').find('.caption').css({top:"107px"}); 
$('.test2').find('.caption').css({top:"165px"}); 
            
$('.teaser').hover(
    function(){
        $(this).find('img').animate({opacity: "1.0"}, 300);     
        $(this).find('.caption').animate({top:"160px"}, 300);               
    }, 
    function(){
        $(this).find('img').animate({opacity: ".8"}, 300);  
        $(this).find('.caption').animate({top:"107px"}, 300);           
    }       
    );  
    

}

};

})(jQuery);

the problem is that the top of part is not working (begins at: var thumbstart...) is there anything that i can do? Does D7 need extra librarys/modules?

I have an problem to get my jQuery code working with D7. In HTML it works fine but with D7 it doesn't work at all...

the code:

(function ($) {

Drupal.behaviors.exampleModule = {
attach: function(context, settings) {                           
            
    var thumbstart = $("ul li img");        
    
    for (var i = 0, ii = thumbstart.length; i < ii; i++){
        if (thumbstart[i].title && thumbstart[i].title.length > 0)
        {           
            var imgtitle = thumbstart[i].title;     
            $(thumbstart[i]).wrap('<div class="wrapper" />').               
            after('<div class=\'inner\'><span class=\'caption\'>' + imgtitle + '</span></div>').
            removeAttr('title');
                                        
        }                   
    };
// At here the code works fine...
$('.wrapper').find('img').css({opacity: ".8"}); 
$('.teaser').find('.caption').css({top:"107px"}); 
$('.test2').find('.caption').css({top:"165px"}); 
            
$('.teaser').hover(
    function(){
        $(this).find('img').animate({opacity: "1.0"}, 300);     
        $(this).find('.caption').animate({top:"160px"}, 300);               
    }, 
    function(){
        $(this).find('img').animate({opacity: ".8"}, 300);  
        $(this).find('.caption').animate({top:"107px"}, 300);           
    }       
    );  
    

}
};

})(jQuery);

the problem is that the top of part is not working (begins at: var thumbstart...) is there anything that I can do? Does D7 need extra library/modules?