2

私はJSで本当に新しいです。このスクリプトを使用してツールチップを作成しています:

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

完全に機能しますが、ツールチップが表示されたときにフェードイン効果を追加したいと思います。

ありがとう

4

3 に答える 3

3

jquery ドキュメントへのリンクは次のとおりですhttp://api.jquery.com/category/effects/fading/

あなたはこのようなことをしたい:

$('.SimpleTip').on('mouseOver', function (){ 
    $('.SimpleTipHover').fadeIn();
}
于 2012-10-24T17:59:31.650 に答える
1

タイマーと不透明度の変更を使用してプレーンなjavascriptで実行できますが、jQueryを使用してヒントを非表示/表示する方が簡単です

または、 CSS3 トランジションを使用できます

于 2012-10-24T17:55:04.407 に答える
0

この例では、CSS トランジションを使用しています

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

資力

于 2012-10-24T18:27:34.237 に答える