jQuery class fade on input blur/active
I have made an input with an image as background. When the input is active the input changes image.
I want it to animate/fade between theese states.
The way it works now: Class idleInput is added to the input onload. When input is active activeInput class is added instead. How can I animate this?
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
</script>
Thank y开发者_开发知识库ou in advance, and sorry for my bad English... :-)
You should have a look at jQuery.animate and the switchclass method.
$("#button").click(function(){
$(".newClass").switchClass('newClass', 'anotherNewClass', 1000);
$(".anotherNewClass").switchClass('anotherNewClass', 'newClass', 1000);
return false;
});
http://jqueryui.com/docs/switchClass/
精彩评论