我无法在焦点上停止 css/jquery 动画

Question

我想在输入的焦点上停止跨度的动画。

当我做悬停时，没有问题，总是好的。但是我想在集中输入时停止跨度。问题就在这里。我的代码在这里。

实际上，我想用css而不是scss来做到这一点。

和 html ：

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<section id="text">
  <p><span> İSİM</span><input name="name" type="text" placeholder="İsminiz" /></p>
  <p><span> KONU </span><input name="subject" type="text"  placeholder="Konu"/></p>
  <p><span> MAİL </span><input name="mail" type="email"  placeholder="Mailiniz"/></p>
  <p><span> MESAJ </span><textarea name="message" type="text" placeholder="Mesajınız"></textarea>
 </section>

.CSS：

  .aktif1{width:100px;transition:1s;}
.aktif2{width:450px;transition:1s;}
body{
  background:#f7f7f7;
}
p{
  position: relative;
  width:450px;
}
section#text{
  position:relative;
  margin-left:500px;
  margin-top:150px;
}
p input{
  outline:none;
  width:330px;
  height:40px;
  padding-left:120px;
}
p textarea{
  outline:none;
  max-width:330px;
  max-height:40px;
  width:330px;
  height:40px;
  padding-left:120px;
}

p span{
  width:455px;
  height:45px;
  background:#333;
  position: absolute;
  color:white;
  text-align:center;
  line-height:50px;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold;
  transition:1s;
}

Jquery：

$(function() {
  fonk1();
  $('section#text input').focus(function(){
    fonk1().stop();
  });
    fonk2();
  $('section#text input').blur(function(){
     fonk2();
  });
});

var fonk1 = function(){
  $('section#text p').mouseenter(function(){
      $('span',this).animate(1000,function(){
          $(this).css({'width':'100'});
      });
  });
}
var fonk2 = function(){
  $('section#text p').mouseleave(function(){
    $('span',this).animate(1000,function(){
          $(this).css({'width':'450'});
      });
  });
}

Answer 1

我用这个脚本玩了很多。
玩得太开心了，我差点忘了你的问题！ .oO（LOL）

我走得比它的范围更远...
所以这个答案是我逐步重做更改的试验。

-----步骤 1
这是我第一次更改的基础知识...
这可能足以回答您遇到的动画错误。
我在这里从你的脚本中删除了很多。
就像评论中所说，您正在混合.animate()和.css()......
我不明白为什么在这种情况下创建一个函数来调用函数。
你对调用哪个事件感到困惑，也许...
所以我清理了它。

-----步骤 2
但是...«我想在聚焦输入时停止跨度»
我想这是这里真正的问题：

我想我在这里走得更远了....理解它，因为您希望span在字段不为空时保持在左侧......无论该领域是否聚焦。
这正是我接下来要做的！;)

我已经用一个条件包装了你的鼠标离开脚本：

if( $(this).children("input").val() == "" ){

----- 步骤 3
而且，只是为了感谢您为我带来真正的乐趣（！...
这就是我现在使用这个脚本的地方。

这真的是一个很好的输入形式！
再次，谢谢你，你让我度过了一天！

-----步骤 4
前途！
这将是在向span添加复选标记之前添加输入验证。
如果"不符合"，则必须使用红色 X。
但我现在就到此为止。
;)