我无法停止焦点上的 css/jquery 动画答案

【问题标题】：I can't stop the css/jquery animation on focus我无法停止焦点上的 css/jquery 动画
【发布时间】：2016-07-12 14:42:09
【问题描述】：

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

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

实际上我想用css而不是scss来做这个。 here

还有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'});
      });
  });
}

【问题讨论】：

如果您希望第一个 codepen 使用相同的代码，只需 查看已编译的 CSS ...在 css 窗口上单击向下箭头并选择查看已编译的 CSS。然后你可以看到它是纯 CSS
谢谢我不知道这个功能。但我只是想知道我的代码哪里出错了。
您想“在用户聚焦输入后立即停止动画”吗？你的意思是“停止跨度”/“停止悬停”吗？
是的，我试着这么说。
你混合了 css 动画和 jquery 动画，也许这是你的问题的一部分？你应该像 $('span',this).finish(); 这样调用 .stop() 或 .finish()，而不是不返回任何内容的 fonk 函数的结果:-)

标签： jquery css hover focus

【解决方案1】：

我用这个脚本玩了很多。
玩得很开心，我几乎忘记了你的问题！ .oO(哈哈)

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

-- 第 1 步
这是the basics I first changed...
这可能足以回答您的动画错误。
我在这里从您的脚本中删除了很多内容。
就像在 cmets 中所说，您正在混合 .animate() 和 .css()...
在这种情况下，我不明白为什么要创建一个函数来调用函数。
您对调用哪个事件感到困惑，也许...
所以我清理了它。

-- 第二步
但是然后... «我想在输入焦点时停止 span»
我认为这是真正的问题：

我想我在这里走得更远了....理解它，因为当字段不为空时，您希望span 保持在左侧...无论该字段是否聚焦。That's exactly what I've done next! ;)

我已经用一个条件包装了你的 mouseleave 脚本：

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

-- 第 3 步
而且，只是为了感谢您给我带来真正的乐趣 (!)...
Here is where I am now 使用此脚本。

这真的是一个很好的输入表单！
再次感谢你，你让我开心！

-- 第 4 步
未来！
它将在向span 添加复选标记之前添加输入验证。
如果“不符合”，则必须使用红色 X。
但我暂时停在这里。
;)

【讨论】：