Remove transition from child CSS class using JQuery

Question

I have a an ID which has a child class. I want the ID to transition but the class not to transition. Because the class is within the id it is transitioning. I have looked through the CSS jquery documentation and from that I have figured out how to transition both elements, but cannot transition the parent alone.

This is the CSS

#outside {
    background-size: 25em, 25em, auto, cover;
    color: white;
    cursor: default;
    padding: 6em 0;
    text-align: center;
}



    #outside .inside {
        background: rgba(52, 27, 43, 0.5);
        color: white;
        display: inline-block;
        opacity: 0;
        padding: 3em;
        text-align: center;
    }

Here is my attempt at getting the jquery to work

<script>
        $(document).ready(function() {
        var timeToDisplay = 4000;
        var outside = $('#outside');
        var urls = [
            'images/image1.jpg',
            'images/image2.jpg',
            'images/image3.jpg'
            ];

        var index = 0;
        var transition = function() {
            var url = urls[index];

            outside.css('background-image', 'url("images/light-bl.svg"), url("images/light-br.svg"), url(' + url + ')');

            index = index + 1;
            if (index > urls.length - 1) {
                index = 0;
            }
        };

        var run = function() {
            transition();
            outside.fadeIn('slow', function() {
                setTimeout(function() {
                    outside.fadeOut('slow', run);
                }, timeToDisplay);
            });
        }

        $("div.inside").css("-webkit-transition","none !important;");
        $("div.inside").css("-moz-transition","none !important;");
        $("div.inside").css("-ms-transition","none !important;");
        $("div.inside").css("transition","none !important;");



        run();
});
</script>

Pejs · Accepted Answer · 2014-11-23 08:30:12Z

1

How about var outside = $('#outside:not(.inside)');?

answered Nov 23, 2014 at 8:30

Pejs

2658 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aazzaawwaazzaa Over a year ago

thanks @pejs, would you mind expanding on what you mean I don't quite understand?

Pejs Over a year ago

you can use jQuery :not selector to exclude specific class/id from the operation. On the other hand, as a rule, you should NOT have on one page 2 or more object with identical id (in your case #outside). But it's hard to say if you won't provide jsfiddle example

Pejs Over a year ago

Your code, based on browser console, contain several syntax errors so it'll be hard to get it to work withouth tidying it up first. Besides I'm not sure what your output should look like but I don't think you need this amount of jQuery to make transition effect, most of it can be probably achieved in css only. In any way if you want to do transition that changes the visual aspect of #outside element only, it's easily achievable, but again, you need to be more specific... and cleaner :) jsfiddle

Collectives™ on Stack Overflow

Remove transition from child CSS class using JQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related