Javascript windows 8使用css和js悬停到幻灯片效果

我认为只有css3才能实现这一点，我被卡住了，因为我仍然试图理解css3中的“易用性”之类的东西

我目前的进展

“nike”应该向左滑动，“just do it”从右侧缓慢显示。需要帮助

$("#box").mouseenter(function(){

}).mouseleave(function(){

});

试试这个，我想这是你想要的

body {
    font-family:'Fenix', serif;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
}
#box {
    width: 160px;
    height: 60px;
    background: orange;
    text-align:center;
    border:2px solid orange;
    border-radius:5px;
    cursor:pointer;
    display: inline-block;
    overflow:hidden;
    position:relative;
    transition: all 1s ease;
}

#box:hover {
    color:orange;
    background:#FFF;
}

#box:hover > p {
    left:-160px;
}

#box > p{
    color:white;
    transition: all 1s ease;
    position:absolute;
    top:0px;
    left:0px;
    font-size:24px;
    line-height:60px;
    display:inline-block;
    margin:0px;
    padding:0px;
    width:160px;
}

#box > span{
    white-space:no-wrap;
    position:absolute;
    top:0px;
    left:160px;
    display:inline-block;
    transition: all 1s ease;
    width:160px;
    font-size:24px;
    line-height:60px;
}

#box:hover>span{
    color:orange;
    left:0px;
}

---

编辑：Sirikon的解决方案似乎很好。我这样做对您来说可能仍然很有趣，因为

.row

中的浮动元素被“推送”的方式

我为你创作了一把小提琴：

它还需要擦亮，是的，但我想你会想出办法的。请注意，这只是一个可能的解决方案

希望这有帮助。干杯

守则：

HTML

<div class="slide-box">
    <div class="row">
        <div class="col left">NIKE</div>
        <div class="col right">JUST DO IT</div>
    </div>
</div>

JS

body {
    font-family:'Fenix', serif;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
}

.slide-box{
    width:300px;
    height:100px;

    background:orange;

    border:2px solid orange;
    border-radius:5px;

    cursor:pointer;

    overflow:hidden; /* comment this for a visualization of how it works */
}

.slide-box:hover {
    color:orange;
    background:#FFF;
}

.row{
    width:600px;
    height:100px;
}

.col{
    width:200px;
    height:50px;

    padding:25px 50px;

    text-align:center;

    float:left;

    overflow:hidden;
}

$(document).ready(function() {

    var leftWidth,
        leftPaddingX;

    leftWidth = $('.left').width();
    leftWidth = leftWidth + 'px';

    leftPaddingX = $('.left').css('padding-left');

    $('.slide-box').mouseover(function(){
        $('.left').animate({
            width: '0px',
            paddingLeft: '0px',
            paddingRight: '0px'
        }, 300);
    }).mouseleave(function(){
        $('.left').animate({
            width: leftWidth,
            paddingLeft: leftPaddingX,
            paddingRight: leftPaddingX
        }, 300);
    });

});

---

所以不需要任何js！只需使用左或右保护和过渡缓解右？右，只需调整过渡时间和效果。这将逐渐将值从原始CSS状态更改为新状态