Question

我在Flash中发现了这种效果。有没有类似的方法在JavaScript中解决这个问题？请查看下面的链接，将鼠标悬停在2013年以上。

http://www.iflymagazine.com/?locale=no_en

Answer 1

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<div id='2'><span>2</span></div>
<div id='0'><span>0</span></div>
<div id='1'><span>1</span></div>
<div id='3'><span>3</span></div>

div{
    height:100px;
    width:100px;
    color: white;
    background: red;
    display:inline-block;
    text-align:center;
}
span{
    font-size:125px;
    line-height:-10px;
}

$(function () {
    $('div').mouseenter(function () {
        $(this).stop(true).animate({backgroundColor: 'white', color: 'red'}, 500, 'easeInQuint');
    });

    $('div').mouseleave(function () {
        $(this).stop(true).animate({backgroundColor: 'red', color: 'white'}, 500, 'easeInQuint');
    });
});

它没有你想要的幻灯片效果。要做到这一点，我想你将不得不乱用多个元素并交换它们。

编辑：我又看了一下你想要的东西，我做了this:

.wrapper{
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
}
.number{
    position:absolute;
    bottom:0px;
    left:0px;
    height:100px;
    width:100px;
    color: white;
    background: red;
    display:inline-block;
    text-align:center;
    z-index:2;
}
.text{
    position:absolute;
    display:inline-block;
    z-index:1;
    top:0px;
    left:0px;
    height:100px;
    width:100px;
    color: black;
    background: gray;
    font-size:8pt;
}
.spnNum{
    font-size:125px;
    line-height:-10px;
}

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<div class='wrapper'>
    <div class='number' id='2'><span class='spnNum'>2</span></div>
    <div class='text' id='t2'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='0'><span class='spnNum'>0</span></div>
    <div class='text' id='t0'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='1'><span class='spnNum'>1</span></div>
    <div class='text' id='t1'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>
<div class='wrapper'>
    <div class='number' id='3'><span class='spnNum'>3</span></div>
    <div class='text' id='t3'>
        <span> Text Goes in here to be displayed when the number is hidden</span>
    </div>
</div>

$(function () {
    $('.number').mouseenter(function(){
        $(this).slideUp(200);
    });

    $('.text').mouseleave(function(){
        $(this).prev().slideDown();
    });

});

如果你试图在数字之间过快地移动这可能有点儿错误，这只会随着动画的速度变慢而变得更糟。但它确实让你真正接近我想你想要完成的事情。

如何在悬停时显示文字？

1 个答案: