I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this
jQuery('.menux').click(function() {
jQuery(this).toggleClass('is-active');
jQuery('.a').toggleClass('a1');
jQuery('.b').toggleClass('b1');
jQuery('.c').toggleClass('c1');
});
When clicked, the animation runs perfectly. But when I clicked the second time, the animation does not appear. different when clicked the first time, the animation runs slowly down. When i using jQuery('.c').toggleClass('c1', 2000); <-- duration,
Not work!. How do I use animation in clicks a second time? In order to ascend slowly upwards
This my test https://jsfiddle.net/u6aztsgt/1/
Try creating a new animation and toggle that on second click or vice versa.
You can use this css for the second click animation,
#-webkit-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
#-moz-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
#keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
.a2, .b2, .c2 {
-webkit-animation: dropUp 1s;
-moz-animation: dropUp 1s;
animation: dropUp 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0;
display: block;
}
.a2 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.b2 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c2 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
Related
for my navigation, I'm using a CSS fade-in effect for the sub navigation, but it only works in Chrome, not in Firefox.
.mega .hover ul.level-2 li:nth-child(5n+1) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.mega .hover ul.level-2 li:nth-child(5n+2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.mega .hover ul.level-2 li:nth-child(5n+3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.mega .hover ul.level-2 li:nth-child(5n+4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
Here is the example:http://jsfiddle.net/rzf7w69u/28/
Thanks for you help.
Use prefix for Firefox and Opera
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
My background has image with transition. The text has to fade in after the background transition completed. I used transition-delay but it works in mozilla and not in chrome. As for the fade in effect, it works in chrome and not in mozzila. Now all I want is the text to fade in after delay.How to correct my code to achieve this pls?
css
.text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
transition-delay: 2s;
-moz-transition-delay:2s;
-o-transition-delay:2s;
-webkit-transition-delay:2s;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#target {
position: relative;
left:0;
background-image:url('../img/top-bg.jpg');background-repeat:no-repeat;
width: 120%;
background-size:cover;
height: 600px;
background-position: 200px 50%;
transition: background-position 2s ease-in-out;
}
#target.wide{
left: -20%;
padding-left: 30%;
background-position: 0px 50%;
}
script
<script>
$(document).ready(function () {
$('#target').toggleClass("wide");
});
</script>
html
<div id="target">
<div class="small-12 medium-11 large-11 columns text2">
Beyond Law,<br/>
The Spirit of Innovation is Our strenght.
</div>
</div>
</div>
<div style="clear: both"></div>
Link:
http://vani.valse.com.my/beldon/index.php
EDITED
text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
**transition: opacity 0.5s ease-in;**
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
transition-delay: 2s;
-moz-transition-delay:2s;
-o-transition-delay:2s;
-webkit-transition-delay:2s;
}
added the line in bold. It works as desired in mozilla but in chrome the transition delay not working.
I added below lines after the animation as below and got it working in chrome.
-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
/*to make the text not visible untill the transition starts*/
-webkit-opacity: 0;
/*without this the text will disappear after the animation*/
-webkit-animation-fill-mode: forwards;
so it should look like this in full
.text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
transition: opacity 0.5s ease-in;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
transition-delay: 4s;
-moz-transition-delay:4s;
-o-transition-delay:4s;
-webkit-transition-delay:4s;
-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
/*to make the text not visible untill the transition starts*/
-webkit-opacity: 0;
/*without this the text will disappear after the animation*/
-webkit-animation-fill-mode: forwards;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
I am trying to select an element, add hover to it, then have it select the child of that element. So, in this case, the hover should select the div and apply the animation to the p nested inside of it.
I have looked around on the w3schools website. I thought adding the :only-child selector might work, but it doesn't seem to. Perhaps that is not a valid syntax.
If possible, I would like to keep this CSS if possible, but perhaps it needs jquery. Does anyone know how to do this? Any input is appreciated.
HTML
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>
CSS
#dropDown1:hover:only-child {
/*****Display P in Drop Down on Hover*****/
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from { opacity: 0; }
to { opacity: 1; }
}
#dropDown1:hover .dropP {
Should do the trick. The .dropP specifies the element with class dropP that is a child of #dropDown1 when #dropDown1 is being hovered.
Hover somewhere below Home to see the text showing :)
You need to add prefixes for all vendors in you keyframes for this to work properly .
Change your css like this
.dropP{
opacity: 0;
}
#dropDown1:hover .dropP {
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>
When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.
Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.
I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. click here however i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction.
/** HTML **/
div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
/* jquery **/
$(".overlay").addClass("visible");
$(".overlay").removeClass("visible");
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("visible");
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("visible");
});
/** CSS ANIMATION **/
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-Webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
Add following css and HTML tag .
HTML code:-
<h1 class="animated fadeInUp" >Example</h1>
CSS code:-
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});