Функция работает со второго раза

[jeysmook]

В этой функции hover выполняется со второго раза, а мне нужно чтобы сразу выполнялся. То есть я захожу на сайт и навожу на меню, функция стразу выполняется, а у меня она выполняется со второго раза. Почему? Спасибо.

$(document).ready(function(){
	$.fn.dynamicMenu = function(options){
		options = $.extend({
			speed: 200,
			reset: 1000,
		}, options);
		var menu = $(this);
		var firstItem = $('.firsItem', menu);
		$('<div class="hover"></div>').css({
			width: firstItem.outerWidth(),
			height: firstItem.outerHeight(),
			left: firstItem.position().left,
			top: firstItem.position().top,
		}).appendTo(this);
		hover = $('.hover', menu);
		$('div:not(.hover)', menu).hover(function(){
			clearTimeout(reset);
			hover.animate({
				width: $(this).outerWidth(),
				left: $(this).position().left,
			},{
				duration : options.speed,
				queue : false,
			});
		},function(){
				reset = setTimeout(function(){
					hover.animate({
						width: firstItem.outerWidth(),
						left: firstItem.position().left,
					}, options.speed);
				}, options.reset)
		});		
	};
	$('.menu').dynamicMenu();
});

CSS

.hover{
	display:block;
	position:absolute; padding:5px; margin:-6px 0 0 -6px; z-index:0;
	background:url(../../body/bg/hover.png); border:1px solid #24368B; color:#fff;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
	box-shadow:0 0 2px #000; -moz-box-shadow:0 0 2px #000; -webkit-box-shadow:0 0 2px #000;
}

HTML

<div class="menu">
       <div class="firsItem"><a href="/">Главная</a></div>
       <div><a href="/">Фотографии</a></div>
       <div><a href="/">Рассказ</a></div>
</div>

[cmd]

Первый раз вижу такой селектор

$('<div class="hover"></div>').css({

Почему не

$('div.hover').css({

[walik]

Вы вешаете hover тогда когда пройзойдет наведение на один div, тоесть пока на див не навели событие на .hover не повесится. Поэтому вешайте это событие в другом месте независимо от событий других дивов.

Первый раз вижу такой селектор

Это создание элемента.

$('<div class="hover"></div>').css({
            width: firstItem.outerWidth(),
            height: firstItem.outerHeight(),
            left: firstItem.position().left,
            top: firstItem.position().top,
        })*!*.appendTo(this);*/!*

[jeysmook]

cmd, потому, что я не выбираю элементы, а создаю его. Когда пишем li.hover, ничего не создается.
walik,
cmd,
Спасибо все за ответы, но я уже нашел ошибку, там нужно было объявить переменную reset до события hover, потому, что :

$('div:not(.hover)', menu).hover(function(){
			clearTimeout(reset); // событие с переменной reset (а ее у нас она не создана когда наводим первый раз)
			hover.animate({
				width: $(this).outerWidth(),
				left: $(this).position().left,
			},{
				duration : options.speed,
				queue : false,
			});
		}

[jeysmook]

Может кому интересно будет, вот полный, работающий код:

$(function(){
		$.fn.dynamicNav = function(options){
			options = $.extend({
				speed: 500,
				reset: 1000,
				queue: false,
			}, options);
			var nav = $(this);
			var firstItem = $('.firstItem', nav);
			var reset;
			$('<li class="hover"></li>').css({
				width: firstItem.outerWidth(),
				height: firstItem.outerHeight(),
				left: firstItem.position().left,
				top: firstItem.position().top,
			}).appendTo(this);
			var hover = $('.hover', nav);
			$('li:not(.hover)', nav).hover(function(){
				clearTimeout(reset);
				hover.animate({
					width: $(this).outerWidth(),
					left: $(this).position().left,
				},{
					duration: options.speed,
					queue: options.queue,
				});
			}, function(){
				reset = setTimeout(function(){
					hover.animate({
						width: firstItem.outerWidth(),
						left: firstItem.position().left,
					}, options.speed)
				}, options.reset);
			});			
		}
		$('.mainNav').dynamicNav();
	});