I want that hovering one element affects other element. In this I want on hovering some div part creates animation in images in other div. For that I used this code:
HTML:
<div class="s">hover here</div>
<section>
<div class="hs-wrapper">
<img src="images/1.gif" alt="image01"/>
<img src="images/2.gif" alt="image02"/>
</div>
</section>
JavaScript:
$(document).ready(function () {
$(".s").mouseenter(function () {
$(".hs-wrapper img").css({
-webkit-animation-play-state:running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
});
$(".s").mouseleave(function () {
$(".hs-wrapper img").css({
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
});
});
But it's not working. Please provide suggestions.
Based on the markup you provided, you don't need jQuery for this.
Just use the selector .s:hover + section .hs-wrapper img. Using the adjacent sibling combinator, +, you can select the succeeding section element when hovering over .s. From there, the child img element is selected.
section .hs-wrapper img {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
}
.s:hover + section .hs-wrapper img {
-webkit-animation-play-state:running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
Here is a basic example:
section .hs-wrapper img {
opacity:0;
transition: 3s ease-out; /* Mouseleave */
}
.s:hover + section .hs-wrapper img {
opacity:1;
transition: .5s ease; /* Mouseenter */
}
Related
I am building a simple login/signup screen. I'm toggling the login/signup forms through a state variable. The toggle works fine, but everything happens in just one frame and I want to animate the height transition of the form container, as well as fade the forms in or out as they switch. I am struggling to understand/tame the transition property and so far I managed to transition the height, but it only works once, and of course, I haven't been able to animate the forms opacity. Can anyone help me figure out what I'm missing? code sandbox link: https://codesandbox.io/s/wizardly-flower-e42dj
Better you paste your code here, but anyways
you can use CSS keyframes for fade-in effect.
.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
When you are adding class to show login form and signup form, add this "fade-in" class too. Similarly, you can write the same for fading out.
https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js
Updated your code for your reference.
As the title says, this animation is not working on Firefox.
I am running this animation through JavaScript after a few seconds by using:
document.getElementById('my_id').style.webkitAnimationPlayState = "running";
I also tried:
style.animationPlayState
In the same file, changing the background-color animation works perfectly.
My conclusion is, there is something wrong with opacity on Firefox?
#my_id {
opacity: 0;
animation: animation 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
-webkit-animation: animation 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation: animation 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
}
#keyframes animation {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
The above CSS is from the element I want to animate.
Instead of using JavaScript to add -webkit-animation-play-state, just add a class to your #my_id div using onload that includes all of the browser prefixes.
JavaScript
window.onload = function() {
document.getElementById("my_id").className += "running";
}
CSS
#my_id.running {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
The above code adds the .running class to your #my_id element, which declares animation-play-state: running, including the browser prefixes. You can test the above code by checking out my example that uses your code. I've tested it and it works in Firefox (51), Chrome, Opera, & Safari.
I want tot revert back to my first position from the current frame of animation.
Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation.
// html
------------------------------------
<div class="wrapper">
<div class="test"></div>
</div>
Css
.wrapper {width: 300px; height: 400px; position: relative;}
.test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}
.wrapper:hover .test{
animation-name:testin ; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
#keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
#-webkit-keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
Please tell me if there is any javascript / jquery help or library for this kind of effects.
Thanks
what you want to achieve can be done with JavaScript or JQuery. These two are the ones that triggers functionality in a web page, so in your example the functionality of ":hover" (which is CSS) can also be achieved with JS libraries. In this case a simple one to use is hover(), so let's say we use JQuery library for this, and we'll start off by setting the appropiate scripts and markup in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
<script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Once you have that, we will need to create the other keyframe animation which will be the opposite, something like this:
#keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
#-webkit-keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
Now for the JS part, what we will do is to create a class in CSS from the one you already had, and create two classes, one with the keyframe animation-name: "testin", and the other with "testinBack":
.animationTest{
animation-name: testin; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.animationTestBack{
animation-name: testinBack; -webkit-animation-name:testinBack;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
With that created, now the JS part should end up like this:
$( ".wrapper" ).hover(function() {
$('.test').addClass('animationTestin');
$('.test').removeClass('animationTestinBack');
},function(){
$('.test').removeClass('animationTestin');
$('.test').addClass('animationTestinBack');
});
So that when you hover on the wrapper you add the class that has the animation going down, and when you hover out, you remove that class and then add the animation going up.
Here is a fiddle:
https://jsfiddle.net/n1k5hkff/
Hope it helps,
Leo.
I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!
I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.
I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.
HTML
<div id=click>Click me</div>
<div id=spinner></div>
jQuery
$(function () {
$("#click").click(
function () {
document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['animation-iteration-count'] = '1';
document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';
});
});
CSS
#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin-constant {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin-constant {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin-constant {
from {
transform:rotate(0deg);
}
to {
transform:rotate(36 0deg);
}
}
Here is the fiddle of the basic concept.
http://jsfiddle.net/jN5vw/1/
Try this one:
See Demo
jQuery:
$('#click').click(function () {
$("#spinner").removeClass('spinner');
$("#spinner").addClass('anim');
});
CSS:
.anim{
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin 5s ;
-webkit-animation: spin 1s linear;
-webkit-animation-iteration-count:1;
}
I think this is what you are asking.