使用CSS中的JQuery和修复按钮在文本框中淡入/淡出文本

问题#1如何淡入文本并淡出文本，而不只是在文本框中显示

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

更新：

---

padding left:30px修复了空间问题

html:

CSS:

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

要淡入/淡出，请使用
fadeIn（）
或
fadeOut（）
功能第2部分：为按钮添加填充：

padding left:45px

第1部分：

这有点棘手。我要做的是设置输入颜色的动画。然后在鼠标离开时，恢复颜色。现在jquery本身并没有设置颜色动画，但是您可以使用它们的
UI脚本
来解决这个问题

将输入的默认颜色设置为与背景相同的颜色
悬停时，将颜色设置为希望人们看到的所需颜色（我选择黑色）
鼠标悬停时，将颜色设置为与输入相同的颜色
动画完成后，删除输入值
查看下面的完整代码：

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


#sv{background:#ccc url（view.png）不重复左上角；高度：53px；宽度：186；光标：指针；左边填充：40px；}
#pv{background:#ccc url（print.png）不重复左上角；高度：53px；宽度：186；光标：指针；左边填充：40px；}
#ev{background:#ccc url（take.png）不重复左上角；高度：53px；宽度：186；光标：指针；左上角填充：40px；}
#tvinfo{color:#fff；}



$（函数（）{
$（'#sv'）。悬停（函数（）{
$（'#tvinfo'）.animate（{color:'#000'}）.val（“查看已参加考试的分数”）；
},
函数（）{
$（'#tvinfo'）。动画（{color:'#fff'}，函数（）{
$（this.val（“”）；
})
}
);
$（'#pv'）。悬停(
函数（）{
$（'#tvinfo'）.animate（{color:'#000'}）.val（“查看谁打印了证书”）；
}, 
函数（）{
$（'#tvinfo'）。动画（{color:'#fff'}，函数（）{
$（this.val（“”）；
})
}
);
$（'ev'）。悬停(
函数（）{
$（'#tvinfo'）.animate（{color:'#000'}）.val（“查看谁已经参加了考试”）；
}, 
函数（）{
$（'#tvinfo'）。动画（{color:'#fff'}，函数（）{
$（this.val（“”）；
})
}
);
});
像这样检查这个演示

我刚刚创建了一个假输入框，淡入/淡出实际输入框的不透明度，并使用
.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("");});
        }
    );
});

我相信他需要填充。
填充左：30px
修复了issueAWESOME脚本，但是脚本的一个问题是如果我移动鼠标足够快，即使鼠标在其中一个按钮上，文本框也是空白的。或者，如果我将光标从一个按钮移动到另一个按钮，则在恢复到原始颜色时，可能需要在动画中使用fast
#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;
}

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

$(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("");});
        }
    );
});