CODEWITHSUNDEEP
javascriptjquerycss
CIRCLE
CIRCLE

Reputation: 4879

JQuery addClass without it having effect on element

I have this class fade that I need my elements to have for external plugins and I have this code where I want an element to fadeIn and Out using JQuery and for that I have to remove de class fade and when I add it again after my fadeIn it fades again.

How can I add a class and prevent it from taking action?

$.ajax({
    url: BASE_URL+page,
    type: 'get',
    dataType: "html",
    data: {},
    success: function (data, status) {
        if(action == true){
            target.removeClass('fade').fadeOut(500, function(){
                target.html(data).fadeIn(500).addClass('fade'); <-----------
            });
        }
    }
});

It's from bootstrap:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear;
}

Upvotes: 1

Views: 124

Answers (1)

LcSalazar
LcSalazar

Reputation: 16841

I'm not sure I understood your requirements, but if you want to have the class fade applied to the element, but you don't want it to have the stylesheet's properties applied to it, you can make use of another class to indicate that the element should not have the effect, and use the pseudo selector not on the stylesheet.

Like this:

// Just add another class with the fade one. "no-effect" for example.
target.html(data).fadeIn(500).addClass('fade no-effect');

And use the pseudo not on the css:

.fade:not(.no-effect) {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

This way the transition will only be applied to elements that have the .fade class, but don't have the .no-effect class.

Hope it helps someway.

Upvotes: 2

Related Questions