0

Basically I have a button where I would like to hover and slide to the green (active) button then mouse out and slide to what would appear to be the opening grey unactive button but it comes in from the left, I then would like to cancel this setting so my button is back at the start without actually transitioning to it, hope that makes sense?

At the moment if I transition to the first button going from left:0 to left: -210px you see the transition because the .btn-ctn has transition on it, is it possible to temporarily disable this so the buttons effectively jump so you dont see the green middle button?

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    list-style: none;
}

body {
    padding: 20px;
}

.direction {
    width: 70px;
    overflow: hidden;
}

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.on {
    left: -70px;
}

.btn-ctn.off {
    left: 0;
}

.btn-ctn > li {
    float: left;
    position: relative;
}

.btn {
    width: 70px;
    height: 70px;
    background: #676767;
    display: block;
}

.btn::after {
    content: '';
    width: 30px;
    height: 30px;
    border-right: 2px solid white;
    border-top: 2px solid white;
    display: block;
    position: absolute;
    top: 0; right: 15px; bottom: 0; left: 0;
    margin: auto;
    -webkit-transform:rotate(45deg);
}

.active .btn {
    background: #5cdf84;
}

.btns > li::after {

}

JS

$('.btn').on('mouseenter', function() {

    $('.btn-ctn').removeClass('off').addClass('on');

}).on('mouseleave', function() {

    $('.btn-ctn').removeClass('on').addClass('off');

    //reset to start without actually animating so if i hover over again the same animation happens as if its first time?

});

JSFiddle http://jsfiddle.net/AtZX2/2/

4

2 回答 2

2

编辑我想我知道你现在想要做什么。正如我之前建议的那样，您确实需要将transition属性移动到onand类上：off

.btn-ctn {
    width: 210px;
    position: relative;
    left: -140px;
}

.btn-ctn.on {
    left: -70px;
    -webkit-transition: left .3s ease-in-out;
}

.btn-ctn.off {
    left: 0;
    -webkit-transition: left .3s ease-in-out;
}

...但关键是然后监听webkitTransitionEnd事件，以便在off完成滑动后删除类：

$('.btn-ctn').on('webkitTransitionEnd', function(e)  { 
     $(e.target).removeClass('off');
});

JSFiddle 演示在这里：http: //jsfiddle.net/AtZX2/6/

于 2013-08-16T15:57:26.317 回答
1

我创建了一个小提琴：Example

基本上你做的很对。它唯一缺少的就是动画结束时的超时：

setTimeout(function(){
    $('.btn-ctn')
        .removeClass('on off2 animated')
        .addClass('off')
}, 300);

将过渡的 CSS 值与您的 JS 代码同步可能会出现问题。考虑完全在 javascript 中使用.animate. 我知道它的 CSS3y 较少，但它可以防弹。

于 2013-08-16T16:13:02.997 回答