How to make a jQuery step animation?


Tags: javascript,jquery,css3,jquery-animate,css-transitions

Problem :

I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.

What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and open them in order like a spiral and then close them in order. Starting from blank and ending with blank. By open I mean some kind of slide effect (hard to think of the correct term) but think of a loading gif spiral that looks like it's spiraling. (Like the mac rainbow wheel, only making the previous colors disappear after cycling through.)

I'm using jquery and would prefer a jquery solution so I don't have to worry about browser compatibility issues, but I could accept css transitions as a last resort.

I've attached some images to give a better visual idea. I have no code right now but my plan was just to have a div inside the body where the jquery would draw or do this animation. I really don't even know where to start so I don't have anything to build from nor do I really know the exact terminology I'm looking for. Hopefully my images will give a better understanding. Thanks.

enter image description here

enter image description here



Solution :

I used moredemons's answer as a basis, using CSS triangles. It does the same thing, but it properly separates the CSS so you don't have to edit the JS to edit the colors. The JS is also simpler, doesn't rely on if/elses for all 16 states.

The main benefit of a programatic solution over a gif is that you can customize the colors, sizes, animation rate more easily.

Initial HTML All triangles hidden

<div id ="ct" >
    <div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
    <div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
    <br/>
    <div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
    <div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>

CSS

.triangle {
    font-size:0;
    border: 50px solid transparent;
    display: inline-block;    
    width: 0;
    height: 0;
    margin:0;
    padding: 0;
}

.triangle-se {
    border-color: red red blue blue;
}

.triangle-sw {
    border-color: red blue blue red;
}

.triangle-nw {
    border-color: blue blue red red;
}

.triangle-ne {
    border-color: blue red red blue;
}

.triangle-hide-tl {
    border-top-color: transparent;
    border-left-color: transparent;
}

.triangle-hide-tr {
    border-top-color: transparent;
    border-right-color: transparent;    
}

.triangle-hide-br {
    border-bottom-color: transparent;
    border-right-color: transparent;        
}

.triangle-hide-bl {
    border-bottom-color: transparent;
    border-left-color: transparent;        
}

JS

setInterval((function(){
    var index = 0;
    // Which square is going to be modified in each stage (16 stages)
    var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
    // The clases to add and remove
    var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];           
    return function() {
        var el = $('#ct div.triangle').eq(map[index]);
        if (index < 8) {
            // Showing pieces
            el.removeClass('triangle-hide-' + classesToChange[index] );
        } else {
            // Hiding pieces
            el.addClass('triangle-hide-' + classesToChange[index - 8] );
        }
        index++;
        if (index >= 16) {
            index = 0;
        }
    };
})(), 200);

    CSS Howto..

    How to do CSS attribute selector with title~= that has to contain a space?

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    How to reduce the wiDth of dropdown-menu?

    How to get hoverover text to be at the same line-height as the triggering text

    How can I get mobile safari to use the right CSS?

    How to edit the CSS of a div that does not contain a H1 tag?

    How to disable the Dropdown?

    How does wikimedia code there input onfocus

    How to make the progress bar with html css javascript

    How to trigger css :hover event on PageLoad

    How to save game information PHP/HTML/CSS/JS [closed]

    how to position an element on top of another element?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to make two lines text inside list-item element of bootstrap? [closed]

    How to maintain the background image until end of the page

    Css - How to override css for a table cell

    How to add padding to a reapeating CSS background without padding the content?

    How to vertically center links in a menu?

    How to create an Hours of Operation list with HTML and CSS?

    how can I set my gradient background in css for full width and height of the page?

    How to apply CSS style which will be ignored for tfoot or last TR

    Change Class or CSS “display” property of a DIV and show it smoothly

    How to style an asp.net menu with CSS

    How to translate html, css and js into one javascript (animation)

    How to override default CSS file location in a Qml Webview?

    How to center vertically child elements inside div [duplicate]

    how to combine css with php while loop and table?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to code a scrolling frame in css

    How to get MathJax's HTML output just like Stackedit.io?