Focus () jQueryUI not working

Question

I have a problem with input focus in jQueryUI. I used the hover () method on the button and it works, but focus () on the input does not work. I have no idea why. Here is the code and the violin

$(document).ready(function(){
  $('input[type=text]').focus(function(){
    $(this).stop().animate({
      backgroundColor: '#000'
    }, 1000);
  }, function() {
    $(this).stop.animate({
      backgroundColor: 'rgba(0,0,0,0)'
    }, 1000); 
  });
});

And here is the violin

https://jsfiddle.net/ssa7sh4f/12/

Answer 1

I do not know exactly what you are trying to do. But in your code, you assign 2 handlers to focus (for example, @squint pointed out).

Instead, you can assign one handler focus()and one for focusout(), for example:

$(document).ready(function(){
  $('input[type=text]').focus(function(){
    $(this).css('background-color', 'black');
  }).focusout(function() {
    $(this).css('background-color', 'white');
  });
});

https://jsfiddle.net/g6997gnh/