CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Carlos Vazquez
Carlos Vazquez

Reputation: 23

Is there a way to exclude a rule and don't affect my jQuery?

I have this rule in my 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;
}

And I have this jquery effect:

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

When I press "#hide", the show and hide effect for #entries and #message is ruined due to the transition. Is there a way to exclude the rule and have no affect only for the jQuery show / hide?

Upvotes: 0

Views: 56

Answers (2)

guest271314
guest271314

Reputation: 1

Try excluding active class from css rules ; add, remove "active" class during animations

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")
        });
    });

Upvotes: 0

Buzinas
Buzinas

Reputation: 11725

You can change your rule for:

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

Upvotes: 2

Related Questions