I am trying to get a box to grow, fade, change blue , and reset according to button pressed. So far color change , and reset are working ; fade and grow result in my box dissapearing.
How can I get the box to fade on click, while staying the same color as it currently is, and grow while remaining what color it is currently , when clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<style>
body {margin:25px}
#resetDiv {height:150px;width:150px; background-color:orange;}
#blueDiv {height:150px;width:150px; background-color:blue;}
#fadeDiv {width:150px;height:150px;background-color:orange;opacity:0.75;}
#growDiv {height:150%;width:150%;background-color:orange}
</style>
</head>
<body>
<button onclick="grow()">
Grow
</button>
<button onclick="blue()">
Blue
</button>
<button onclick="fade()">
Fade
</button>
<button onclick="reset()">
Reset
</button>
<div id="blueDiv">
</div>
<script>
var div = document.getElementById("blueDiv");
function blue() {
div.setAttribute("id", "blueDiv");}
function reset() {
div.setAttribute("id", "resetDiv");}
function fade() {
div.setAttribute("id", "fadeDiv");}
function grow() {
div.setAttribute("id", "growDiv")
}
</script>
</body>
</html>
For fade-in, you can add fade-in class to the element (when clicking the button).
This is the relevant css:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
For grow, you can add grow class:
.grow {
transform: scale(1.5);
}
So you can declare it:
const myDiv = document.getElementById('myDiv'); // get the element
function grow() { // add grow to class list
myDiv.classList.add("grow");
}
// add fade-in and remove it after 2 seconds
// 2 sseconds are the seconds of fade-it to get completed.
function fade() {
myDiv.classList.add("fade-in");
setTimeout(function(){myDiv.classList.remove("fade-in");}, 2000);
}
function blue() {
myDiv.classList.add("blue");
}
function reset() { // reset the class list
myDiv.classList = [];
}
This is a working jsfiddle
Related
I hope the way I've explained it in the question makes sense. Basically I have a fullPage.js nav on the left hand side made up of circles with wheels as background images. I want each nav link to spin/rotate onmouseenter and stop in it's tracks onmouseleave. But I don't want the animation to reset to it's initial state hence why I'm using JS otherwise I would use css animations.
In an ideal world I would also want the link to the current or 'active' section spin continuously and stop where it was (not reset) if another nav link is clicked and the clicked link to start. But I have been on this for a couple of days and will settle for just the basic onmouseenter and onmouseleave functionality at this point which is why you won't see any 'active' element defined in the code below.
Currently I'm just getting the wheel jumping in rotation and not rotating continuously.
Rotating code borrowed from answer here: rotating a div element onmouseenter and stop rotation onmouseleave
Thank you!!!
const fullPageNav = document.getElementById('fp-nav');
const fullPageNavLinks = fullPageNav.getElementsByTagName("a");
const fullPageNavLinksArray = Array.prototype.slice.call(fullPageNavLinks);
let x = 0;
let y;
function start() {
y = setInterval(rotate, 25);
}
function stop() {
clearInterval(y);
}
for (let i = 0; i < fullPageNavLinksArray.length; i++) {
fullPageNavLinksArray[i].addEventListener('mouseenter', start, false);
fullPageNavLinksArray[i].addEventListener('mouseleave', stop, false);
}
function rotate() {
for (let i = 0; i < fullPageNavLinksArray.length; i++) {
fullPageNavLinksArray[i].addEventListener('mouseenter', function() {
fullPageNavLinksArray[i].style.transform = 'rotate(' + (++x % 360) + 'deg)';
fullPageNavLinksArray[i].style.transition = 'none';
});
}
}
<div id="fp-nav" class="fp-left fp-show-active">
<ul>
<li>
<a href="#" class="active spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%201</span>
<span></span>
</a>
</li>
<li>
<a href="#" class="spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%202</span>
<span></span>
</a>
</li>
<li>
<a href="#" class="spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%203</span>
<span></span>
</a>
</li>
</ul>
</div>
Thank you to #CBroe for the easier answer. Use animation-play-state/animationPlayState instead of trying to be clever with setInterval.
const fullPageNav = document.getElementById('fp-nav');
const fullPageNavLinks = fullPageNav.getElementsByTagName("a");
const fullPageNavLinksArray = Array.prototype.slice.call(fullPageNavLinks);
fullPageNavLinksArray.forEach(fpnla => {
fpnla.addEventListener('mouseenter', function() {
fpnla.classList.add('hovering');
});
fpnla.addEventListener('mouseleave', function() {
fpnla.classList.remove('hovering');
});
});
#keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#fp-nav ul li a {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
#fp-nav ul li a.active {
animation-play-state: running!important;
}
#fp-nav ul li a.hovering {
animation-play-state: running!important;
}
so... I have a h1 and a button. I want to add animation which i created using CSS to the h1 on clicking the button using JQuery.
When you click the button, the animation should add more content to h1.
I want it to start when I click the button but it starts as soon as I load the HTML.
As I am new to this skill, I am unable to understand other complex answers. Please help me out.
here's the HTML:
<div class="container-fluid center" id="mainPage">
<div id="heading" class="row">
<h1 id="wishH1">NAME!</h1>
</div>
</div>
<div class="container-fluid center" id="gift">
<button type="button" id="giftButton">
<img id="giftImg" src="gift.png">
</button>
</div>
here's the CSS:
#keyframes wish {
25% {
content: : "hi ";
}
50% {
content: : "hello ";
}
75% {
content: "hola ";
}
}
#wishH1::before {
content: "hey there ";
animation: wish 20s linear infinite;
}
here's the JQuery:
different comments show different things I've tried to do after removing the animation part from CSS but they don't even start the animation...
$('#giftButton').click(function() {
$("#gift").fadeOut(1500);
/*$("#wishH1").css("animation",wish);
$("#wishH1").css("animation-duration",6s);
$("#wishH1").css("animation-timing-function",linear);
$("#wishH1").css("animation-iteration-count",infinite);*/
/*$("#wishH1").animate({animation: "wish 6s linear infinite"});*/
/*("#wishH1").css("animation-play-state","running");*/
setTimeout(function() {
$("#gift").fadeIn(1500);
}, 20000);
});
the h1 changes like:
hey there NAME!
hi NAME!
hello NAME!
hola NAME!
now, this starts playing the animation as soon as I start the html but I want it to play after I click the button.
I have some other content in html and css but to make it short, I removed the irrelevant stuff.
Please let me know where and what should I add or remove in JQuery or remove from CSS to get the desired output. Thank you!
P.S. as this is my first question, it may not be described properly. Sorry for the inconvenience.
You need to activate the animation after the click but you can't select pseudo elements (the ::before part) in jQuery, because they are not part of DOM. But you can add a specific class (animation-start) to the parent element and control its pseudo elements in CSS.
$('#giftButton').click(function() {
$("#gift").fadeOut(1500);
$('#wishH1').addClass('animation-start');
setTimeout(function() {
$("#gift").fadeIn(1500);
}, 20000);
});
#keyframes wish {
25% {
content: "hi ";
}
50% {
content: "hello ";
}
75% {
content: "hola ";
}
}
#wishH1::before {
content: "hey there ";
}
#wishH1.animation-start::before {
animation: wish 5s linear infinite;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid center" id="mainPage">
<div id="heading" class="row">
<h1 id="wishH1">NAME!</h1>
</div>
</div>
<div class="container-fluid center" id="gift">
<button type="button" id="giftButton">
<img id="giftImg" src="gift.png">
</button>
</div>
There were also extra semicolons in your CSS here that may caused you some trouble.
#keyframes wish{
25%{
content:: /* here */ "hi ";
}
50%{
content:: /* here */ "hello ";
}
75% {
content: "hola ";
}
The problem is that on the css code you direcly set the animation. you need to add the animation on click.
Something like this:
css
#keyframes wish{
25%{
content: "hi ";
}
50%{
content: "hello ";
}
75% {
content: "hola ";
}
}
#wishH1::before{
content: "hey there ";
}
#wishH1.active::before{
animation: wish 2s linear infinite;
}
js
$('#giftButton').click(function(){
$('#wishH1').addClass('active')
$("#gift").fadeOut(1500);
setTimeout(function() {
$("#gift").fadeIn(1500);
$('#wishH1').removeClass('active')
}, 20000);
});
HTML
<h1><span id="animate_text"></span> NAME!</h1>
<button type="button" id="giftButton">
<img id="giftImg" src="gift.png">
</button>
JQUERY CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
JS
let interval;
let i = 0;
let values = ['Hi', 'Hello', 'Hola']
$('#giftButton').on("click", function () {
interval = setInterval(function () {
if (i >= values.length) {
i = 0;
}
$('#animate_text').text(values[i]);
i++
},
2000);
})
While you cannot directly set the style of a pseudo element through Javascript, you can set a CSS variable on the actual element and this will be picked up by the pseudo element.
So we start by setting --name: none and then in the Javascript (or jquery) set the CSS variable to wish and the animation will start.
document.querySelector('button').addEventListener('click', function () {
document.querySelector('#wishH1').style.setProperty('--name', 'wish');
});
#keyframes wish{
25%{
content: "hi ";
}
50%{
content: "hello ";
}
75% {
content: "hola ";
}
}
#wishH1 {
--name: none;
}
#wishH1::before {
content: "Hey there ";
animation: var(--name) 20s linear infinite;
}
<div class="container-fluid center" id="mainPage">
<div id="heading" class="row">
<h1 id="wishH1">NAME!</h1>
</div>
</div>
<div class="container-fluid center" id="gift">
<button type="button" id="giftButton">
<img id="giftImg" src="gift.png">
</button>
</div>
I am currently learning on my own some CSS & JS and i'm stuck on a part i really want to work on but have trouble finding the right answers online as there seem to be a tons of methods yet i couldn't make any of them work.
Here is a snippet of what i have in mind :
let htmlcontent = `<p>It's me again!</p>`;
function animation() {
let content = document.getElementById("content");
content.innerHTML = "";
content.innerHTML = htmlcontent;
}
#content p {
font-size: 100px;
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>
The idea is that when i click on the button, old content gets replaced by new HTML content and i want that new content to fade in from the right (a transition) every time i click the button.
I'm sorry if my question is bad/weird, english isn't my primary language and i have no one else to ask at the moment. Thank you for your patience.
You could just make a CSS animation and play that whenever you click the button.
let htmlcontent = `<p>It's me again!</p>`;
let content = document.getElementById("content");
function animation() {
content.innerHTML = htmlcontent;
content.classList.add("animate");
setTimeout(function() {
content.classList.remove("animate");
}, 500); // 500 is the same time as the CSS animation
}
#content p {
font-size: 100px;
}
.animate {
animation: fadeIn 500ms ease-out backwards;
}
#keyframes fadeIn {
from {
transform: translateX(250px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>
To trigger a CSS transition, change the CSS state after you inserted the HTML. You can do this by changing a class (on the container or an inserted element).
Also see here:
Is it possible to animate a change to innerHTML using CSS only?
I have forward and backward buttons for an image gallery. Currently, they fade away when the mouse is idle. Any movement on the page will show them again. Here's the code:
//fade out previous/next buttons on mouse idle
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.fader').fadeIn();
timer = setTimeout(function() {
$('.fader').fadeOut(1500)
}, 1000)
})
This works fine, but I also would like the buttons to not fade out at all if they are currently being hovered.
As a test, I've tried this code:
//both buttons are stored in class .fader
//when buttons are hovered over
$(".fader").hover(
function(){
//give them this class
$(this).toggleClass('is-hover');
})
//if buttons have .is-hover class, print test statement to console
if($(".fader").hasClass('is-hover')){
console.log("true");
}
I'm hoping to see the test "true" statement printed to the console, but it's not happening.
Ultimately, I'd like to wrap the first function in the second. If buttons are not being hovered over, then perform this timed fadeout of buttons.
Here is where the buttons are in the HTML:
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination"></div>
<!--The buttons-->
<div class="swiper-button-next fader"></div>
<div class="swiper-button-prev fader"></div>
</div>
You can use CSS for the button hovering...
But to track mouse movement on the document, a script is needed.
You can use both! ;)
// To track mouse movement and fadein all buttons
var timer;
$(document).on("mousemove",function(){
$(".fader").addClass("faderShowOnMouseMove");
if(typeof(timer)!="undefined"){
clearTimeout(timer);
}
timer = setTimeout(function(){
$(".fader").removeClass("faderShowOnMouseMove");
},1000);
});
/* Base style for buttons */
.fader {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
/* For single button hovering */
.fader:hover {
opacity: 1;
}
/* Used with JS mouse movement */
.faderShowOnMouseMove{
opacity: 1;
}
/* Just for this demo ;) */
.swiper-pagination{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper">
Hover over here! <i>(right below this text)</i><br>
<div class="swiper-pagination">
<!--The buttons-->
<button class="fader">1</button>
<button class="fader">2</button>
<button class="fader">3</button>
</div>
</div>
</div>
I've written a function that swaps a "Menu" button with a "Close" button when clicked (hiding one div and displaying another), and vice versa. I'm struggling to add an animation to the toggle of each swap.
This is what I have:
$(document).ready(function() {
$('#menu-button').on('click', function() {
$('#menu-button').toggleClass('inactive', 1000);
$('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
$('.close-trigger').on('click', function() {
$('#close-button').toggleClass('active').toggleClass('inactive', 1000);
$('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
});
I've also tried fadeIn/fadeOut/fadeToggle instead of toggleClass to no avail. The problem with fadeToggle is that both elements briefly appear at the same time, and there's still no fade animation. Is there a better way to program this?
please try this
$(document).ready(function() {
$('#button1').on('click', function() {
$('#button1').hide();
$('#button2').show().addClass('toggle');
});
$('#button2').on('click', function() {
$('#button2').hide();
$('#button1').show().addClass('toggle');
});
});
#button2
{
display:none;
}
.button.toggle
{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>
If you wish to use toggleClass, you must accompany it with a CSS transition in your stylesheet. Otherwise, the element will simply disappear, as toggleClass does not provide animation by itself.
A CSS transition would be simple to add to your stylesheet, all that would be necessary would be to place these properties on the rule for your class:
transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */
Remember that properties such as display cannot be animated, so you must control the appearance using a property such as opacity, which can be animated because it is a number.
toggleClass() doesn't allow animation. The second argument is not the time. See the docs:
http://api.jquery.com/toggleclass/
I guess the best for you would be CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
If you don't want to use transition, that would do the thing:
$('#menu-button').on('click', function() {
$('#menu-button').hide();
$('#close-button').fadeIn();
});
$('.close-trigger').on('click', function() {
$('#close-button').hide();
$('#menu-button').fadeIn();
});