Question

I am currently setting my delay here:

.isotope .isotope-item {
    -webkit-transition-property: left, top, opacity;
    -moz-transition-property: left, top, opacity;
    -ms-transition-property: left, top, opacity;
    -o-transition-property: left, top, opacity;
    transition-property: left, top, opacity;
    -webkit-transition-delay: 0s, 0.8s, 0s;
    -moz-transition-delay: 0s, 0.8s, 0s;
    -ms-transition-delay: 0s, 0.8s, 0s;
    -o-transition-delay: 0s, 0.8s, 0s;
    transition-delay: 0s, 0.8s, 0s;
}

I have a conditional statement in jQuery and need to be able to change my delay like so:

.isotope .isotope-item {
    -webkit-transition-delay: 2s, 0.8s, 0s;
    -moz-transition-delay: 2s, 0.8s, 0s;
    -ms-transition-delay: 2s, 0.8s, 0s;
    -o-transition-delay: 2s, 0.8s, 0s;
    transition-delay: 2s, 0.8s, 0s;
}

Any ideas if this is possible to accomplish or any other solutions to solve this??

Answer 1

In your condition, add another class to the elements which need the longer delay, for example foo, then change your second style to this:

.isotope .isotope-item.foo {
    -webkit-transition-delay: 2s, 0.8s, 0s;
    -moz-transition-delay: 2s, 0.8s, 0s;
    -ms-transition-delay: 2s, 0.8s, 0s;
    -o-transition-delay: 2s, 0.8s, 0s;
    transition-delay: 2s, 0.8s, 0s;
}

The higher specificity will ensure those elements receive the longer delay time.