jQuery применить анимацию, если форма витала или поле ввода нажато

Question

Я пытаюсь применить эффекты непрозрачности к целой форме, когда она либо зависнет, либо щелкнет окно ввода, когда мышь оставила наклон, чтобы эффект не исчез.

На данный момент у меня есть следующий HTML:

<form id="search"> 
    <input id="search-input" type="text" value="Search" /> 
    <input id="search-submit" type="submit" value="" /> 
</form> 

И это JQuery:

$('form#search').hover(function() { 
    $(this).stop().animate({"opacity": 1}); 
},function() { 
    $(this).stop().animate({"opacity": 0.6}); 
}); 

На данный момент она работает только тогда, когда вы, однако снова и нет, если #search-input нажата в то время как мышь находится в другом месте на экране, как я могу добавить эту финальную часть?

Это невозможно сделать с помощью CSS3, потому что вы не можете применить эффект непрозрачности для всей формы, когда сосредоточен только вход, поскольку нет родительского селектора.

Pseduo Код конечной цели

$($('form#search').hover(), $('form#search input').focus()).functionOn(){ 
    $('form#search').stop().animate({"opacity": 1}); 
}, functionOff(){ 
    $('form#search').stop().animate({"opacity": 0.6}); 
}); 

Answer 1

Код должен хорошо работать при выполнении задания. Это также обрабатывается, если кто-то выдумывает, когда он в настоящее время редактирует ввод, и если вы редактируете ввод, а затем щелкаете в другой «fadeable» div, он должен затем сделать правильный переход к новому «fadeable» div.

Единственное, чего не хватает, - это ваши анимации, но я думаю, вы можете изменить addClass/removeClass на свой анимит, и вам должно быть хорошо идти.

Это заняло некоторое время, поэтому, надеюсь, это поможет!

http://jsfiddle.net/vpz2S/

Answer 2

Почему бы вам не попробовать сделать это только в CSS3? Вы можете сделать это с помощью: hover и: focus.