Inside timout function .is selector isnt working

Inside timout function .is selector isnt working

Hi. After placing my code inside a timeout function, the script is not recognising the .is selector.

I need one part of the code to be rendered if the item has the class .grid_1 or .grid_2, if not use the other code. This worked fine before placing it inside the timeout function.

Does anyone have any idea what is breaking the code?

  1.     $(function() {
            var timeoutID = 0;
                $('ul#grid li').mouseenter(function() {
                    var preview_path= '/index.php/includes/embed_grid_id/'+$(this).attr("id");
                    var position =  $(this).offset();
                    timeoutID = setTimeout(function() {
                        if ($('ul#grid li').is('.grid_1, .grid_2')) {
                            $('.preview').load(preview_path, function(){
                                $('.preview').css({ 'left' : position.left + 196 + 'px'}).css({ 'top' : position.top + 'px' }).fadeTo('slow',1);
                                $('.arrow_right').css({ 'left' : position.left + 181 + 'px'}).css({ 'top' : position.top + 95 + 'px' }).fadeTo('slow',1);
                            });        
                        } else {
                            $('.preview').load(preview_path, function(){
                                $('.preview').css({ 'left' : position.left + -325 + 'px'}).css({ 'top' : position.top + 'px' }).fadeTo('slow',1);
                                $('.arrow_left').css({ 'left' : position.left + -25 + 'px'}).css({ 'top' : position.top + 95 + 'px' }).fadeTo('slow',1);
                            });  
                        }
                    }, 400);
              }).mouseleave(function() {
                    $('.arrow_left, .arrow_right, .preview').fadeTo('fast',0).hide();
                    clearTimeout( timeoutID );
              });
        });