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 />

查询：

$(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

第 2 部分：为您的按钮添加填充：

padding-left:45px;

第1部分：

这有点棘手。我要做的是为输入的颜色设置动画。然后在鼠标移出时，恢复颜色。现在 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>

Answer 2

像这样检查这个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 3

HTML 中会忽略空格。要添加额外的空白，请使用 .

要淡入/淡出，请使用fadeIn()或fadeOut()功能