jquery - 使用 JQuery 淡入/淡出文本框中的文本并修复 CSS 中的按钮

Question

问题 #1:如何淡入淡出文本而不是仅在文本框中显示文本

问题 #2 [已解决]:我想在按钮图标和文本之间留一些空间，但它不起作用。 按钮示例:

更新: 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

查看此演示 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("");});
        }
    );
});