CSS，jQuery - 使用最小高度失去焦點的延遲

我想在失去textarea的焦點時創建延遲。目前，我有：CSS，jQuery - 使用最小高度失去焦點的延遲

<textarea name="description"></textarea>

我的CSS讀取

.my-form textarea { 
height: 35px; 
} 

.my-form textarea:focus { 
min-height: 100px; 
}

有正下方此單選按鈕切換。由於在焦點上添加了額外的像素，它被推下來，但是當試圖點擊一個按鈕時，它失去了焦點，高度回到原來的位置，並且你錯過了點擊。

有沒有一種方法可以在失去焦點的情況下創建延遲，比如說說100毫秒，就足以註冊點擊按鈕？

來源

2014-01-24 Mave

你可以請用HTML更新問題，這將是非常有用的。謝謝 – user2423959

我不認爲這是可能的與CSS ...與javacript這是可能的 –

呃？爲什麼？這就是我所需要的所有HTML，這是必需的？而且我的確說過jQuery - 純Javascript始終沒問題。 – Mave

使用CSS

.my-form textarea { 
     height: 35px; 
     transition: height 0.3s ease 1s; 
    } 

    .my-form textarea:focus { 
     min-height: 100px; 
    }

使用jQuery

$(document).ready(function() { 
      $('.my-form textarea').focusin(function() { 
       $(this).css('height', '100px'); 
      }); 

      $('.my-form textarea').focusout(function() { 
       setTimeout(function() { $('.my-form textarea').css('height', '35px'); }, 500); 
      }); 
     });

來源

2014-01-24 09:07:31

你的CSS不起作用，但jQuery工作正常。 – Mave

你可以嘗試CSS3過渡

.my-form textarea { 
    height: 35px; 
    transition: width ease 0.3s 0.5s; 
} 

.my-form textarea:focus { 
    min-height: 100px; 
}

下面是一個例子：http://jsfiddle.net/689gv/1/

來源

2014-01-24 08:02:18 Vivek

CSS，jQuery - 使用最小高度失去焦點的延遲

回答

相關問題