css-animations/animation-direction/reverse

Question 1

Question by SakerONE

#div {
position: absolute; top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: reverse;
  }
 @-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    20% {
        top: 150px;
        left: 100px;
    }
    to {
        top: 400px;
        left: 300px;
    }   
 }

http://jsfiddle.net/uVv65/2/
why do the reverse animation-direction is the same as normal? I thought it would go from

top: 400px;
left: 300px;

to

top: 50px;
left: 0px;

Answer

Answer by Starx

Starx

There is another way to do this too.

@-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    10% {
        top: 150px;
        left: 100px;
    }
    50% {
        top: 400px;
        left: 500px;     
    }
    to {
        top: 50px;
        left: 0px;
    }   
 }

Demo

Question 2

Question by Andaero

Andaero

===UPDATE===

If I remove the style="display: none; from the template and apply the below method as recommended below, the empty container fires when you click on any other list item. What else can be done?

I have an ul list that is dynamically created at run time using jQuery and JSON (Using inline HTML is a template). I need the background CSS style to change when a user clicks on a list item (#navItem). I’ve tried everything under the moon that I can think of from inline class to .appentTo(), etc. What I have below works fine for hard-coded elements but Nothing seems to work with dynamically loaded content. Whats even more confusing is that the classes in the elements within the li tag initiate…???

Any help would be appreciated. Below are my code snippets. Thnx.

HTML:

<div id="navScrollContainer" class="navContentPosition">
    <ul id="navContent">
    // Display as 'None' to prevent a empty containter from showing -->
        <li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
            <a class="navA">
            <h1 class="navH1">.</h1>
            <h2 class="navH2">.</h2>
            <p class="navP">.</p>
            <hr class="navHR" />
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('#navScrollContainer').on('click', '.ulFx', function() {
        $(this).addClass("liFx");
    });
</script>

This is the Function that injects the data into the DOM as a list:

function loadNav(url, container, appendE) {
    $.getJSON(url, function(data) {

        $.each(data.items, function() {
            var newItem = $('#' + container).clone();
            // Now fill in the fields with the data
                    newItem.addClass('ulFx');
            newItem.find("h1").text(this.label);
            newItem.find("h2").text(this.title);
            newItem.find("p").text(this.description);
            newItem.find("a").attr("href", this.gotoURL);
            newItem.children().appendTo('#' + appendE);
        });

        $('#navHeaderTitle').text(data.listTitle);
        iniScroll('scrollNav', 'navScrollContainer');
        var target = data.targetKey;
        // transition("#" + pageName, "show");
    });
};

The CSS that need to happen (only on that item) when the user clicks on a Item:

@-webkit-keyframes
liBG {from {
    background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
    background-color: transparent
}
}

.liFx {
    -webkit-animation-name: liBG;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

The Class atributes given to the li items:

.navH1 {
    font-size: 18px;
    color: #FFA500;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 15px;
}
.navH2 {
    font-size: 16px;
    color: #999999;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 25px;
    font-weight: bold;
}
.navP {
    color: #888;
    font-size: 14px;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-right: 10px;
}
.navA {
    text-decoration: none;
}
.navHR {
    border: none;
    background-color: #336;
    height: 1px;
}

Answer

Answer by Andaero

Andaero

I added another div and an addClass() method to my function along with Jeff B’s answer above. If the class is hard coded into the tag, it doesnt function.

<ul id="navContent">
    <li id="navItem" style="display: none;">
        <div>//ADDED THIS TAG TO EXCEPT THE CLASS
            <a>
                <h1>.</h1>
                <h2>.</h2>
                <p>.</p>
                <hr/>
            </a>
        </div>
    </li>
</ul>

In my js file:

$.each(data.items, function() {
    var newItem = $('#' + container).clone();
    // Now fill in the fields with the data
    newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
    newItem.find("h1").text(this.label);
    newItem.find("h2").text(this.title);
    newItem.find("p").text(this.description);
    newItem.find("a").attr("href", this.gotoURL);
    newItem.children().appendTo('#' + appendE);
});

Answer

Answer by Starx

Starx

I am not sure where is the problem, but you are trying to do something as such:

$("#navlink").on('click', function() {
     $("#yourselector").css("backgroundColor", "#ddd"); //change the color
});

Tag: css-animations

css-animations/animation-direction/reverse

Question by SakerONE

Answer by Starx

Change CSS of Dynamic List Item

Question by Andaero

Answer by Andaero

Answer by Starx

Please fill the form - I will response as fast as I can!