Question

问题＃1 ：如何淡入文本并淡出文本而不是仅仅在文本框中显示

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

image overlapping texts

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

第2部分：在按钮上添加填充：

padding-left:45px;

第1部分：

这有点棘手。我要做的是为输入的颜色设置动画。然后在鼠标移出时，还原颜色。现在jquery本身不会为颜色设置动画，但你可以使用他们的UI script来解决这个问题。

将输入的默认颜色设置为背景的相同颜色。
在悬停时将颜色设置为您希望人们看到的所需颜色（我选择黑色）
on mouse out将颜色设置为动画颜色，返回相同的输入颜色
动画完成后，删除输入值

查看以下完整代码：

<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()函数

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

3 个答案: