We Keep Coding

How to turn this CSS with plain javascript or jQuery instead of hover to on click

HTML
<div class="flip3d">
<div class="back" >Box1-I</div>
<div class="front">Box1-Front</div>
</div>
<div class="flip3d">
<div class="back" >Box2-back</div>
<div class="front">Box2-Front</div>
</div>
<div class="flip3d">
<div class="back" >Box3-back</div>
<div class="front">Box3-Front</div>
</div>
CSS
.flip3d{
width:200px;
height;200px;
margin:10px;
float:left;
}
.flip3d>.front{
position:absolute;
transform:perspective(600px)rotateY(0deg);
background:#FC0; width:200px; height:200px; border-radius:6px;
backface-visibility:hidden;
transition: transform 1s linear 0s;
}
.flip3d>.back{
position:absolute;
transform:perspective(600px)rotateY(180deg);
background:lightgreen; width:200px; height:200px; border-radius:6px;
backface-visibility:hidden;
transition: transform 1s linear 0s;
}
JS
$(function(){
$('.flip3d').on('click',function(){
if($(this).children('.front')) {
$(this).children('.front').css({'transform':'
perspective(600px)rotateY(-180deg)'});
if($(this).children('.back')) {
$(this).children('.back').css
({'transform':'perspective(600px)rotateY(0deg)'});
}
});
});
what i want to do is to make the div flip the same exact thing but on click instead of hover to be compatible with touch screen it might be noob question for some of you
thanks in advance:)
Edited :
thanks to #AaronEveleth logic
i have found the solution with jQuery now when i click it flip to back but when i click again it doesn't go to front again any suggestion why?

Where you currently have the code inside the :hover blocks, you can change the block to a different class, something like click-class. Here is an example of how you can do that:
/* The code you had for on hover */
.flip3d:hover >.front{
transform:perspective(600px)rotateY(-180deg);
}
.flip3d:hover >.back{
transform:perspective(600px)rotateY(0deg);
}
/* An example of what you can change it to */
.click-class-front {
transform:perspective(600px)rotateY(-180deg);
}
.click-class-front {
transform:perspective(600px)rotateY(0deg);
}
Then in your javascript/jquery code, you can do something like this:
$('.flip3d').click(function(){
if($(this).children('.front')) {
$(this).children('.front').toggleClass('click-class-front');
}
if($(this).children('.back')) {
$(this).children('.back').toggleClass('click-class-back');
}
});
When you click on the div with class front or back, it will check which one was clicked based on the class that is applied to them. It will then toggle(add or remove depending on previous state) the class, and the code in the CSS with that class will be applied.
Note to SO Community: Not able to comment, so I apologize about my improper use of an answer

I can't get my animation to work on load of my website using jquery

So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!
jQuery
$(document).ready(function(){
window.onload = function render(){
$('.title .sub-title').addClass('render');
}
});
CSS
.render {
animation-name: render;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
#keyframes render {
0% { transform: translateX(-800px); }
100% { transform: translateX( 0px ); }
}
HTML
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1><!--Need To add animation
<h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to-->
</div>
Please can someone help?
It would be very beneficial!

Try the following:
$(document).ready(function(){
$('.title, .sub-title').addClass('render');
});
The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.

Your .sub-title class is commented out. Try this:
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1>
<h4 class="sub-title">- Here is a Template Slogan -</h4>
</div>

angular ngShow with animate.css

I want to animate the showing and hiding of an element using animate.css and angular.
I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.
I have tried the following setup on plunker, but it doesn't work.
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
style.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.
I can make it work if I add this to the css:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..
plunker to show what I am seeing.
What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?

You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.
According to that you can edit your code like this:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
EDIT:
In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.
So you have to use the following CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
IMPORTANT NOTE:
In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
Working Plunker with full code

Change your code to this
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show{
transition: all linear 0.5s;
opacity:1;
}

Use jQuery with CSS3 Animations

I need to create a rotator using CSS3 and jQuery. I am using CSS3 to control the fading in and out with jQuery to control when the classes are added. However I cannot get this to work. Here is a jsFiddle of how my current code doesn't work. Here is the code:
$('#action-alerts .rotate:gt(0)').hide();
setInterval(function(){
$('#action-alerts .rotate:first-child')
.queue( function(next){
$('#action-alerts .rotate:first-child').addClass('fadeOut-alert')
}).dequeue().delay(1100)
.queue( function(next){
$('#action-alerts .rotate:first-child').removeClass('fadeOut-alert')
}).next('.rotate')
.queue( function(next){
$('#action-alerts .rotate:first-child').addClass('fadeIn-alert')
}).dequeue().delay(1100)
.queue( function(next){
$('#action-alerts .rotate:first-child').removeClass('fadeIn-alert')
}).dequeue()
.end()
.appendTo('#action-alerts');},
3000);
How would I properly write this to function?
I originally started with the question below:
ORIGINAL QUESTION
I am building a rotator of sorts that transitions divs with a nice fade transition. I was originally using nothing but jQuery and it looked nice on desktops but on mobile devices it flickers. I would like to use CSS3 for mobile devices with jQuery for a fallback but I cannot get the CSS3 + jQuery to control classes to work.
Here is the code I have attempted:
JS
$('#action-alerts .rotate:gt(0)').hide();
setInterval(function(){
$('#action-alerts .rotate:first-child').addClass('fadeOut-alert')
.delay(1100).removeClass('fadeOut-alert')
.next('.rotate').addClass('fadeIn-alert').delay(1100)
.removeClass('fadeIn-alert').end().appendTo('#action-alerts');},
3000);
Note: The above code is within $(document).ready(function() { }); Also I do not see the classes being added by jQuery but no errors are thrown.
CSS
#keyframes fadeIn-alert {
from {
opacity:0;
}
to {
opacity:1;
}
}
.fadeIn-alert {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn-alert;
}
#keyframes fadeOut-alert {
from {
opacity:1;
}
to {
opacity:0;
}
}
.fadeOut-alert {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeOut-alert;
}
Note: I have omitted vendor prefixes in the code posted here.
HTML
<div id="action-alerts">
<div class="quote-holder rotate">
<div class="grid_10">
<h3 class="action-box-red"><span class="alert-icon">Text</span></h3>
</div>
<div class="grid_2">
<a target="_blank" href="#" class="default_button xlarge textcenter red">Read the <br> Report</a>
</div>
</div>
<div class="quote-holder rotate">
<div class="grid_10">
<h3 class="action-box-red"><span class="alert-icon">Text</span></h3>
</div>
<div class="grid_2">
<a target="_blank" href="#" class="default_button xlarge textcenter red">Take <br> Action</a>
</div>
</div>
</div>
<!-- MORE HTML AS ABOVE -->
Why does my code not work and how do I create the type of effect I am using?

How to dynamically rotate the circle on every click using Jquery/Javascript/css?

I have a CSS class which forms a circle and I am trying to rotate it dynamically from Jquery by adding a css property .It works fine when I click the button for the first time and rest of the time it's idle. I tried using "cssAmination" function and its of no use. I am not able to figure out where I am going wrong. Please help me out in fixing this code. Thanks in advance.
/*Circle code*/
div.circle{
width: 300px;
height: 300px;
-moz-border-radius:150px;
-webkit-border-radius: 150px;
background:#808080;
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}
/*rotate class*/
div.rotateCircle
{
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}
#-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}
//Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
});
}); </script>
<body>
<h3>Labs Project</h3>
<div>
<div id=rotateCircle class="circle">
</div>
<div id=rotateCircle class="horizontalLine">
</div>
<div id=rotateCircle class="verticalLine">
</div>
<div class="divButton">
<table>
<tr>
<td><a class="btn" href="#">HOME</a></td>
<td><a class="btn" href="#">Class</a></td>
<td><a class="btn" href="#">CV</a></td>
<td><a class="btn" href="#">CM</a></td>
</tr>
</table>
</div>
</div>
</body>

You should take a look to the JavaScript events for the animations : https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events
Basically, I've added a class for the animation's name
#rotateCircle.rotate {
-webkit-animation-name: moveCircle;
-moz-animation-name: moveCircle;
-o-animation-name: moveCircle;
animation-name: moveCircle;
}
And instead of adding the CSS in jQuery, you just add the class and remove it when the animation is finished, with the animationend event :
$(function() {
var $rotateCircle = $('div#rotateCircle');
$("a").click(function(){
$rotateCircle.addClass('rotate')
.on('animationend', function() {
$rotateCircle.removeClass('rotate');
});
});
});
(I've made it look a bit nicer too)
Here is the new working fiddle.
NB: The animationend event is prefixed on some browser, here is a gist I've made to support all the different browser (you'll need Modernizr).

There is a css3 transition property that will make this task really simple. I used webkit for my post, change properties accordingly.
CSS
#rotateCircle.rotate {
-webkit-transform: rotate(0);
-webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}
Then with js, all you need is to set the css property to transition on, and it will magically animate to those settings, in this case transform.
$(function() {
var angle = 0;
$("a").click(function(){
angle += 90;
$("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
});
});
I didn't test this code, but the transition property is simple to use, and since I've learned it, I rarely use keyframes/css animation properties anymore.