フォーカスでCSS/jqueryアニメーションを停止できません。

Question

入力のフォーカスに合わせてアニメーションを止めたいと思います。

私がホバーしているときは、いつも良い、問題はありません。しかし、私は入力を集中するときにスパンを止めたい。問題はここにあります。私のコードはhereです。

実際には私はこのことを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'}); 
     }); 
    }); 
} 

Answer 1

私は、このスクリプトで多くのことを果たしました。
私はあなたの質問をほとんど忘れてしまったので、とても楽しかったです！ .oO（LOL）

私はそれのスコープより方法更に多く行ってきました...
だから、この答えは私の変化は、ステップバイステップでやり直しに私の試験です。ここで

-----ステップ1
は、あなたが持っているアニメーションのバグに答えるためにenoughtすることができるthe basics I first changed ...
です。
ここであなたのスクリプトから多くを削除しました。
コメントで述べたように、.animate() ans .css() ...
この場合、関数を呼び出す関数を作成する理由がわかりません。
電話する予定が混乱しているかもしれません...
だから私はそれをきれいにしました。

-----ステップ2
しかし、その後... は«私は入力を集中するときスパンを停止したい»私はここに本当の問題であることを仮定
：

私はもう少しここに行ったと思う....フィールドが空でないときには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が必要です。
しかし、私はここでここでやめます。
）