How to do 3 jQuery callbacks - javascript

I want to have three functions to be performed in order. First, enlarge a object, then rotate 360 degrees, last resize to the size it was before enlargement. I can do the first and second, but I don't know how to do the last.
How can I accomplish this using jQuery callbacks? Can anyone give me a structure to work from? I am so new to jQuery.
Here's what I have so far:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#abc').click(function () {
$(this).animate({
width: '+=90px',
height: '+=90px',
fontSize: '300%'
}, function(){
$(this).toggleClass('rotate');
});
// add function -- resize to normal
});
});
</script>
<style>
.rotate {
transition: all 0.7s;
-webkit-transform: rotate(6.28rad);
-ms-transform: rotate(6.28rad);
transform: rotate(6.28rad);
}
</style>
</head>
<body>
<div id="abc" style="border:1px solid;width:90px;">HTML / CSS</div>
</body>
</html>

Here's the actual link I have created for you https://jsfiddle.net/beljems/t83xmj8h/. I have modified your code :)
I used CSS keyframes for animating the div element and added setTimeout function to the jquery, I have estimated the time that works fine :)

I'm tempted to suggest an full CSS animation for that "complex" animation, using #keyFrames.
And a setTimeout() to remove the animation class after.
$(document).ready(function() {
// Click handler
$('#abc').click(function() {
// CSS Animation!
$(this).addClass("twist");
// Remove the class after the animation...
setTimeout(function(){
$('#abc').removeClass("twist");
},3000); // Same delay as the animation time ( 3s )
});
});
#abc{
display: inline-block;
padding: 5px;
border: 1px solid black;
}
.twist{
animation-name: bigtwist;
animation-duration:3s;
}
#keyFrames bigtwist{
0%{
transform: scale(1) rotate(0rad);
}
30%{
transform: scale(3) translate(50%, 50%) rotate(0rad);
}
70%{
transform: scale(3) translate(50%, 50%) rotate(6.28rad);
}
99.9%{
transform: scale(1) translate(0%, 0%) rotate(6.28rad);
}
100%{
transform: scale(1) translate(0%, 0%) rotate(0rad);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="abc">HTML / CSS</div>
</body>

Related

Display loading circle when button is clicked in php website using javascript?

I'm new to programming in javascript and am having a lot of difficulty doing something I believe is simple. I have a loading circle that I want to display when an upload button is clicked (and also want my external php code to run to do image processing). Then, I want the loading screen to go away once the php page is done loading. I'm currently having trouble even getting the loading screen to show. I have the loading circle code in the style section of my header as so:
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 25%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #00ff00;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
Then, I have my upload button and the script in the body as so:
<p class="text-center">
<button onclick="loadingCircle()"> Click to Upload! </button>
</p>
<div id="loader" style="display:none;"></div>
<script>
function loadingCircle() {
$("#loader").show();
}
</script>
Currently, when I click the upload button, no action is happening... any help is appreciated and apologies for the noobness.
Add jquery file https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
or you can hide by using simple javascript:
<script>
function loadingCircle() {
document.getElementById('loader').style.display='block';
}
</script>
the $("#loader") points to the fact that you are trying to use jQuery, which you have not included.
Include it from a cdn, and it should work

How do I fade 2 images with jQuery on mouseenter and mouseleave?

I have a custom button (code below). I want it to:
rotate quickly 360 on mouseenter (currently working fine)
fade quickly to a darker image on mouseenter (also currently working fine)
NOT un-rotate on mouseleave (currently working fine)
I can't yet figure out how to:
fade back to the original image on mouseleave (not working yet)
I have tried so many variations of jQuery including .hover, .fadeToggle, fadeIn, fadeOut as well as animate but none have seemed to work for me.
Am I missing something really simple and obvious?
NOTE: I have just used the Apple logo for demonstration here. If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation.
var thevalue = 1;
$("div.main").mouseenter(function() {
thevalue = thevalue + 1;
if (thevalue % 2 == 0) {
$(this).addClass("myopacity");
} else {
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(500).queue(function() {
$(this).removeClass("change").dequeue();
});
});
div.main {
width: 100px;
height: 100px;
}
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
.myopacity {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
</body>
</html>
Thanks in advance!
is this what you want. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
});
});
</script>
</body>
</html>
I'm not 100% certain what you are after... I think this is close. Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity.
No clue why you even needed the opacity class or the associated jQuery for it.
$("div.main").hover(
function() {
$(this).addClass('change').addClass('myopacity');
},
function() {
$(this).removeClass('myopacity')
});
body { padding: 40px; }
div.main {
width: 100px;
height: 100px;
opacity: 1;
transition: all .5s;
transition: all .5s;
background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
background-size: cover;
}
div.main img {
width: 100%;
height: 100%;
}
.main.change {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all .5s;
background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
background-size: cover;
}
.change.myopacity {
opacity: .6; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
</div>
<p id="dis"></p>
</body>
</html>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources.
Found it.
Trying to manage two transitions on the exact same element was making it too complicated.
I ended up having to add one class to the img element and another to the div element. The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions.
This makes the jQuery much more simple.
See updated code below:
$("div.main").mouseenter(function() {
$(".image").addClass("change").delay(500).queue(function() {
$(".image").removeClass("change").dequeue();
});
});
// jQuery now much more simple. No need for variables or the if/else statement
div.main {
width: 100px;
height: 100px;
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */
div.main img {
width: 100%;
height: 100%;
}
.change {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: .5s;
}
/* .myopacity {
opacity: 0.6;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */
div.main:hover, div.main:active, div.main:focus {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image">
</div>
<p id="dis"></p>
</body>
</html>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well!

Make HTML element disappear with CSS animation

I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?
I would get fancy with keyframes
#keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}
If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.
I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}
div {
width: 100px;
height: 100px;
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>
Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}
<div id="thisone" onclick="waithide()"></div>
I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?
<style>
#test{
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
</style>
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$('button').click(function(){
removeWithAnimate('#test');
});
function removeWithAnimate(id){
$(id).addClass('hide');
setTimeout( function(){
$(id).remove()
},1000);;
}
</script>
$('button').click(function() {
removeWithAnimate('#test');
});
function removeWithAnimate(id) {
$(id).addClass('hide');
setTimeout(function() {
$(id).remove()
}, 1000);;
}
#test {
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
transition: .5s;
invisible:
opacity: 0;
visible:
opacity: 1;
transition will make it appear and disappear smoothly.

Facing issue while applying css transform properties to DOM object using multiple css classes

Following is the code
<html>
<head>
<title>Facing issue while applying css tranform properties to DOM object using multiple css classes</title>
<!-- PUT A PATH OF JQUERY LIBRARY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.onload = function () {
var flag = true;
setInterval(function () {
if (flag) {
flag = false;
$("#spelling_game_score_box_score").addClass("active_score");
}
else {
flag = true;
$("#spelling_game_score_box_score").removeClass("active_score");
}
},2000);
}
</script>
<style>
#spelling_game_score_box_score {
position:absolute;
top:200px;
left:200px;
height: 100px;
width: 100px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
font-size: 36px;
background-color: orange;
}
.active_score {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
}
</style>
</head>
<body>
<div id="spelling_game_score_box_score">100</div>
</body>
</html>
Now, I run the code I can not find scale() effect after interval of 2000 ms. But when I comment following css under #spelling_game_score_box_score selector
/*transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);*/
I can have scale effect but can not find rotate effect.
I want to know that is there some sub properties for css tranform like border has border-color, border-style etc. so I can have some solution regarding the problem.
Please help me if you have some idea about it.
Thank you.
There are two problems here:
CSS Specificity
transform css code
First, you use id to specify the transform functions:
#spelling_game_score_box_score {
...
transform: rotate(-30deg);
...
}
Then, you try to override it by specifying a class:
.active_score {
transform: scale(2);
}
which wouldn't work because of the CSS specificity problem.
You can solve this by making it more specific:
#spelling_game_score_box_score.active_score {
transform: scale(2);
}
But then we come to the second problem where transform: scale(2); overrides the original transformation.
To solve this you can use both rotate and scale in the same transformation.
#spelling_game_score_box_score.active_score {
transform: rotate(-30deg) scale(2);
}
Here is a working fiddle: https://jsfiddle.net/uopfapd3/

How to activate a CSS3 (webkit) animation using javascript?

Im really stuck. I want a CSS animation I have created (below) to activate on clicking a div. The only way I thought I could do that was using javascript to create an onClick event. However I dont know how to run/refrence the animation that is in my css file. Can anyone help me?
This is the animation in my css file that I want to run by clicking on a div.
#-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
I even tried putting the css in the same file as the javascript (index.html) and used the following code to try and activate it on click, but no luck.
<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>
Please help :)
You're missing the duration and you have a trailing space in the name you assign:
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
test.style.webkitAnimationDuration = '4s';
}
Some more infos on #-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/
update
Some working code.
<html>
<head>
<style>
#-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
</style>
<script>
function colorchange(e) {
if (e.style.webkitAnimationName !== 'colorchange') {
e.style.webkitAnimationName = 'colorchange';
e.style.webkitAnimationDuration = '4s';
// make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect
setTimeout(function() {
e.style.webkitAnimationName = '';
}, 4000);
}
}
</script>
</head>
<body>
<div onclick="colorchange(this)">Hello World!</div>
</body>
</html>

Categories

Resources