Question

我的css中有这个规则：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

我有这个jquery效果：

$(document).ready(function(){
    $("#hide").click(function(){
        $("#entries").hide(400);
        $("#message").show(400);
    });
    $("#close").click(function(){
        $("#message").hide(400);
        $("#entries").show(400);
    });
});

当我按＆＃34; #clide＆＃34;时，由于转换， #entries 和 #message 的显示和隐藏效果会被破坏。有没有办法排除规则，只对jQuery show / hide？没有影响

Answer 1

您可以更改以下规则：

*:not(#message):not(#entries) {
  /* your rules here */
}

Answer 2

尝试从active规则中排除css类;在动画期间添加，删除"active"课程

css

   *:not(.active) {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-transition: all 0.6s ease-out;
        -moz-transition: all 0.6s ease-out;
        -ms-transition: all 0.6s ease-out;
        -o-transition: all 0.6s ease-out;
        transition: all 0.6s ease-out;
    }

JS

$(document).ready(function(){
    var elems = $("#entries, #message");
    $("#hide").click(function(){
        elems.addClass("active");
        $("#entries").hide(400);
        $("#message").show(400, function() {
          elems.removeClass("active")
        });
    });
    $("#close").click(function(){
        elems.addClass("active");
        $("#message").hide(400);
        $("#entries").show(400, function() {
          elems.removeClass("active")
        });
    });

有没有办法排除规则并且不会影响我的jQuery？

2 个答案: