2012-06-21 4 views
2

Привет У меня есть следующие настройки jsFiddlejQuery двойной анимации по фокусу?

http://jsfiddle.net/a9ugu/2/

Я задаюсь вопросом, почему я получаю двойное событие анимировать, когда я использую .focus().

Нажмите «кликнуть меня», и окно, которое появляется, оживляет дважды? Как я могу остановить это?

Благодаря

+0

Использование хром смотреть на это я вижу только один? Какой браузер вы используете? – gabeio

+0

Ум я тоже использовал Chrome? Кажется, что он добавляет '50' дважды в первый раз, когда я нажимаю? Последующие клики затем ОК, но первый клик добавляет 2x? – Andy

+0

О, вы имеете в виду двойной широкий ... thats different lol Я думал, что вы имели в виду 2 коробки ... – gabeio

ответ

2

Работа демо, пожалуйста, дайте мне знать, если я пропустил что-нибудь: http://jsfiddle.net/k2Xg2/и из @Andy: http://jsfiddle.net/k2Xg2/1/ достаточно необходимость.

Так вопрос был призыв к .focus следовательно +50 на новое поля ввода:

Надеется, что это помогает,

Коду

var box = $('#box'); 
$('#me').toggle(function() { 
    box.show(); 
    // box.focus(); 
}, function() { 
    box.hide(); 
}); 

//#region Search Box 
$('#box').focus(function() { 
    $(this).select(); 
    $(this).animate({ width: '+=50' }, 200); 
}); 
box.blur(function() { 
    $(this).width(150); 
    $(this).animate({ width: '-=50' }, 200); 
});​ 
+0

С уважением. ... однако, я хочу, чтобы анимация происходила в фокусе?Спасибо за сообщение, но это не решает мою проблему? – Andy

+0

Он прав, когда вы вызываете фокус и выбираете, кажется, что вы вызываете анимацию дважды, следовательно, двойная анимация – gabeio

+0

@ Andy Не стоит беспокоиться :) Круто, так что вы тоже хотите «фокус»? но с анимированием в первый раз? Я мог бы помочь вам, Cheers @gabeDel good edit :) –

0

Нечто вызывая фокус() дважды - возможно, он создан, браузер фокусируется на нем?

Похоже у только хочу, чтобы это 150px широкий в любом случае .. так просто жёстко его:

http://jsfiddle.net/a9ugu/4/

0

Вместо того чтобы делать +50 просто указать целевую ширину, как

$box.focus(function() { 
    $(this).select(); 
    $(this).animate({ width: '150' }, 200); 
}); 
$box.blur(function() { 
    $(this).animate({ width: '100' }, 200); 
});​ 

Demo :http://jsfiddle.net/joycse06/a9ugu/7/

0

вот мой вариант:

var box = $('#box'); 
$('#me').toggle(function() { 
    box.show(); 
    box.focus(); 
}, function() { 
    box.hide(); 
}); 

$('#box').focus(function() { 
    //$(this).select(); this line was not needed and was somehow causing your double animation 
    $(this).animate({ width: '+=50' }, 200); 
}); 
box.blur(function() { 
    $(this).width(150); 
    $(this).animate({ width: '-=50' }, 200); 
});​ 

Единственная строка, которую я прокомментировал, по-видимому, вызывает фокус во второй раз.

0

Пожалуйста, используйте

$(this).attr(width,yourvalue); 

так, что начальное значение, что вы укажете Также вы можете использовать Fading effects во время фокусировки, так что окно не появляется, появляются только мгновенно, а в гладком пути

Смежные вопросы