使用jQuery .addClass和.removeClass进行CSS3转换

时间:2014-01-15 21:44:22

标签: jquery html css3

我有一个很大的主导航面板,我想在它部署(扩展)时制作动画。

我正在使用jQuery通过添加/删除可见/隐藏类来触发它的可见性。

我必须设置延迟时间来应用隐藏类,因为触发器是面板div之外的按钮。 (如果我在按钮上使用翻转,一旦你推出面板就会消失)

代码是这个

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hidden');
        $('#repair-drop').addClass('visible');
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').removeClass('visible').addClass('hidden');
    }, 600);        

});
});

我的CSS如下

.hidden{
    max-height: 0px;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;

}
.visible{
    max-height: 500px;  
}

转换效果根本不起作用。

5 个答案:

答案 0 :(得分:14)

您正在添加和删除包含转换CSS的类。我建议将其移至自己的规则DEMO

.hidden{
    max-height: 0px;
}
.visible{
    max-height: 500px;  
}

#repair-drop{
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}

答案 1 :(得分:14)

我厌倦了这个问题,更好地使用动画:

.container .element.animation  {
    animation: SHW .5s;
    animation-fill-mode: both
}
@keyframes SHW {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}

仅添加.element类.animation及其工作:

$('.container .element').addClass('animation');

答案 2 :(得分:5)

不要删除.hidden类;它包含您的transition样式。只需添加和删除.visible类。

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        setTimeout(function() {
            $('#repair-drop').removeClass('visible');
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/LjhNa/


也就是说,您可能需要改进解决方案,以便用户快速将#repair-drop移除并点击#menu-item-9,然后才能隐藏。

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').data('shown',true).addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        $('#repair-drop').data('shown',false);
        setTimeout(function() {
            if (!$('#repair-drop').data('shown')) {
                $('#repair-drop').removeClass('visible');
            }
        }, 600);        
    });
});

http://jsfiddle.net/mblase75/b8QpB/

答案 3 :(得分:1)

您是否考虑过使用jQuery UI的动画功能?比如

jQuery('#menu-item-9').hide({duration:200,effect:'blind'});

您还可以动画删除类,例如

jQuery('#menu-item-9').removeClass('hidden', {duration:200,effect:'blind'});

答案 4 :(得分:0)

我找到了一种使用jquery easing插件来完成这项工作的方法。 感谢所有人的回复

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hide');
        $('#repair-drop').animate({"max-height":"500px", "padding-top":"20px", "opacity":"1"},1500, "easeOutCubic");
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').animate({"max-height":"0px", "overflow":"hidden", "padding":"0px","opacity":"0"},2000, "easeOutCubic");

    }, 600);        

});
});