Question

我是JS的新手。我正在使用此脚本创建工具提示：

<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover'."onMouseOut="javascript:this.className='SimpleTip'">

它完美无缺，但我想在工具提示出现时添加淡入效果。

由于

Answer 1

以下是jquery docs http://api.jquery.com/category/effects/fading/

的链接

你想做这样的事情：

$('.SimpleTip').on('mouseOver', function (){ 
    $('.SimpleTipHover').fadeIn();
}

Answer 2

你可以在普通的javascript中使用计时器和改变不透明度，但更容易使用jQuery来隐藏/显示提示

或者您可以使用CSS3 transitions

Answer 3

此示例使用CSS Transitions

http://jsfiddle.net/nickaknudson/mZmuQ/

<强> JS

<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover';"onMouseOut="javascript:this.className='SimpleTip';">test</span>

<强> CSS

.SimpleTip {
    background-color:green;
}
.SimpleTipHover {
    background-color:red;
}
span {
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 1s;
    /* Firefox 4 */
    -moz-transition-property:background;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:1s;
    /* Safari and Chrome */
    -webkit-transition-property:background;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:1s;
    /* Opera */
    -o-transition-property:background;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:1s;
}

<强>资源

http://www.w3schools.com/css3/css3_transitions.asp

为div类添加淡入效果

3 个答案: