如何使用jQuery在HTML元素上應用css轉換？

我有以下代碼：如何使用jQuery在HTML元素上應用css轉換？

<input type="text" name="name" required> 

<div class="form-error-cont"> 
    <p class="form-err"> 
     <i class="icon-remove"></i> 
     <span class="text">Your name is required.</span> 
    </p> 
</div>

現在，當表單是空的，我加入一個animate類的form-err類使用jQuery。

當animate類在那裏時，我想單獨使用CSS對內部的i和span元素進行動畫處理。

這怎麼可能？這裏需要任何特殊的CSS選擇器？

來源

2016-06-23 Radical_Activity

'.FORM-err.animate .icon去除的不透明度{：0; ''？我不願意將它作爲答案張貼，因爲我不確定這是否是您的意思。 –

確定有可能，不需要「特殊」的CSS選擇器。我建議你做一些關於「轉換」和「轉換」CSS屬性的研究。 –

您需要在i和span使用css transformation分開。

我修改了代碼，請看一看，這裏是你的答案。

HTML：

<input type="text" name="name" id="input" required> 
<button id="btn"> 
Check 
</button> 
<div class="form-error-cont"> 
<p class="form-err"> 
    <i class="icon-remove">i </i> 
    <span class="text">Your name is required.</span> 
</p> 
</div>

CSS

.form-err{ 
opacity:0; 
transition:0.2s all linear; 
} 
.animate{ 
opacity:1; 
} 
.icon-remove, 
.text { 
display: inline-block; 
transition: transform 500ms; 
transform: translateY(50px); 
} 
.text { 
    transform: translateY(-50px); 
} 
.animate .icon-remove, 
.animate .text { 
transform: translateY(0px); 
} 
.icon-remove { 
color: red; 
}

jQuery的

$(function(){ 
$('#btn').click(function(){ 
var val = $("#input").val(); 
if(val==''){ 
$(".form-err").addClass("animate"); 
} else{ 

} 
}); 
});

工作小提琴JsFiddle

來源

2016-06-23 23:51:20

我不太清楚你想怎麼動畫，但我已創建一個小提琴，你可以輕鬆地編輯自己。

https://jsfiddle.net/room1tfv/2/

你可以用$('input').val();檢查，如果輸入是空的。

目前類獲取後，當它是空的，但是從你說的話，你可能要扭轉這種局面。

隨意發表意見，並要求更改！

來源

2016-06-23 22:29:28

把你的代碼放在答案本身，所以答案是自包含的。只使用演示來支持實際答案中的內容 – charlietfl

如何使用jQuery在HTML元素上應用css轉換？

回答

相關問題