我無法停止焦點上的css/jquery動畫

當我做懸停時，沒有問題，總是很好。但是當我關注輸入時我想停止跨度。問題在這裏。我的代碼是here。

Actualy我想用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'}); 
     }); 
    }); 
}

來源

2016-07-12 Arda Zaman

如果您希望第一個codepen相同**在CSS窗口中查看已編譯的CSS ** ...，請單擊向下箭頭並選擇查看已編譯的CSS。那麼你可以看到它作爲普通的CSS – DaniP

謝謝我不知道這個功能。但我只是想知道我在代碼中的錯誤。 –

你想'一旦用戶關注輸入就停止動畫'嗎？「停止跨度」/「停止懸停」是否意味着這種情況？ – flob

我打了很多與此腳本。
有這麼多的樂趣，我差點忘了你的問題！ .oO（LOL）

我去方式更進一步比它的範圍...
所以這個答案是我的審判重做我的變化一步一步來。

-----第1步
這裏是the basics I first changed ...
這可能是足夠多的回答對你有動畫的bug。
我在這裏刪除了很多腳本。
就像在評論中說的，你在混合.animate() ans .css() ...
而我不明白爲什麼你創建一個函數來調用一個函數在這種情況下。
你很困惑在哪個事件打電話，也許...
所以我清理它。

-----第2步
但後來... «我想，當我焦點輸入停止跨度»
我估計是真正的問題在這裏：

我想我在這裏進一步瞭解了....當你想讓span在字段不爲空的時候留在左邊...不管這個字段是否被聚焦。
That's exactly what I've done next!;）

我纏你的鼠標離開腳本的條件：

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

-----第3步
而且，只是爲了感謝您對我的實際真正的樂趣（！）...
Here is where I am now與此腳本。

這真的是一個很好的輸入表單！
再一次，謝謝你，你讓我的一天！

-----第4步
未來！
在添加複選標記到span之前，將添加輸入驗證。
如果「不符合」，則必須使用紅色X.
但我現在停下來。
;）

來源

2016-07-12 18:42:44

我無法停止焦點上的css/jquery動畫

回答

相關問題