淡入/淡出文字文本框使用JQuery和CSS修復按鈕

Question

問題1：如何褪色的文字和淡出的文本，而不是僅僅顯示在文本框中它的

問題＃2 [求助]：我想在按鈕圖標和文本之間留出一些空間，但它不起作用。按鈕的 示例：

UPDATE： padding-left: 30px;固定的空間的問題。

HTML：

<input type="button" id="sv" value="   Score Viewer"></input> 
<input type="button" id="pv" value="   Print Viewer"></input> 
<input type="button" id="ev" value="   Exam Viewer"></input> 
<br> 
<input type=text id="tvinfo" value="" readonly size=50 /> 

JQuery的：

$(function() { 
    $('#sv').hover(
     function() { 
      $('#tvinfo').val("View scores of exams already taken"); 
     }, 
     function() { 
      $('#tvinfo').val(""); 
     } 
    ); 
    $('#pv').hover(
     function() { 
      $('#tvinfo').val("View who printed the certificate"); 
     }, 
     function() { 
      $('#tvinfo').val(""); 
     } 
    ); 
    $('#ev').hover(
     function() { 
      $('#tvinfo').val("View who already took the exam"); 
     }, 
     function() { 
      $('#tvinfo').val(""); 
     } 
    ); 
}); 

CSS：

#sv { 
    background: #ccc url(view.png) no-repeat top left; 
    height: 53px; 
    width: 186; 
    cursor: pointer; 
} 
#pv { 
    background: #ccc url(print.png) no-repeat top left; 
    height: 53px; 
    width: 186; 
    cursor: pointer; 
} 
#ev { 
    background: #ccc url(taken.png) no-repeat top left; 
    height: 53px; 
    width: 186; 
    cursor: pointer; 
} 

Answer 1

檢查這個DEMO http://jsfiddle.net/yeyene/tfRed/這樣呢？

我剛剛創建了一個假的輸入框，並淡入/淡出實際輸入框的不透明度，並使用.stop()來加快懸停輸入/輸出。

$(function() { 
    $('#sv').hover(
     function() { 
      $('#tvinfo').stop().fadeTo(500,1).val("View scores of exams already taken"); 
     }, 
     function() { 
      $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");}); 
     } 
    ); 
    $('#pv').hover(
     function() { 
      $('#tvinfo').stop().fadeTo(500,1).val("View who printed the certificate"); 
     }, 
     function() { 
      $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");}); 
     } 
    ); 
    $('#ev').hover(
     function() { 
      $('#tvinfo').stop().fadeTo(500,1).val("View who already took the exam"); 
     }, 
     function() { 
      $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");}); 
     } 
    ); 
}); 

Answer 2

白色空間在HTML忽略。要添加額外的空格，請使用 。

要淡入/淡出使用fadeIn()或​​功能

Answer 3

第2部分：添加填充到您的按鈕：1

padding-left:45px;

部分：

這是有點麻煩。我會做的是動畫輸入的顏色。然後在鼠標外面，恢復顏色。現在jquery本身不會動畫顏色，但是您可以使用它們的UI script來解決此問題。

1. 將輸入的默認顏色設置爲背景的相同顏色。
2. 懸停動畫的顏色給你希望人們能看到希望的顏色（我選擇了黑色）
3. 鼠標出動畫的顏色回到相同顏色的輸入
4. 一旦動畫完成，去掉輸入

檢查的價值了下面的全碼：

<style type="text/css"> 

#sv {background: #ccc url(view.png) no-repeat top left;height: 53px;width: 186;cursor: pointer; padding-left:40px;} 
#pv{background: #ccc url(print.png) no-repeat top left;height: 53px;width: 186;cursor: pointer; padding-left:40px;} 
#ev{background: #ccc url(taken.png) no-repeat top left;height: 53px;width: 186;cursor: pointer; padding-left:40px;} 
#tvinfo{color:#fff;} 
</style> 

<input type="button" id="sv" value="Score Viewer"></input> 
<input type="button" id="pv" value="Print Viewer"></input> 
<input type="button" id="ev" value="Exam Viewer"></input> 
<br> 
<p><input type="text" id="tvinfo" value="" readonly size=50 /></p> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script type="text/javascript"> 
$(function() { 
    $('#sv').hover(function() { 

      $('#tvinfo').animate({color:'#000'}).val("View scores of exams already taken"); 
     }, 
     function() { 
      $('#tvinfo').animate({color:'#fff'},function(){ 
       $(this).val(''); 
      }) 
     } 
    ); 
    $('#pv').hover(
     function() { 
      $('#tvinfo').animate({color:'#000'}).val("View who printed the certificate"); 
     }, 
     function() { 
      $('#tvinfo').animate({color:'#fff'},function(){ 
       $(this).val(''); 
      }) 
     } 
    ); 
    $('#ev').hover(
     function() { 
      $('#tvinfo').animate({color:'#000'}).val("View who already took the exam"); 
     }, 
     function() { 
      $('#tvinfo').animate({color:'#fff'},function(){ 
       $(this).val(''); 
      }) 
     } 
    ); 
}); 
</script>