Launch new animation with every click in jquery - javascript

I'm trying to create simple clicker game with JS and I want to give my game some animations.
A little "$+1" should animate to the top and fade everytime I click the button. It works but only for one click.
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false});
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
});
<button id="clicker" onclick="click_f()">Click!</button>
<center><span id="fading_dolar">+$1</span></center>

Try resetting css bottom of #fading_dolar to 0px at complete of .animate()
$("#clicker").click(function() {
var el = $("#fading_dolar");
el.finish().css("opacity", 1).animate({
bottom: "120px",
opacity: 0
}, {
duration: 1000,
queue: false,
complete:function() {
$(this).css("bottom", "0px")
}
});
});
#fading_dolar {
display: block;
position: relative;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clicker">Click!</button>
<center><span id="fading_dolar">+$1</span>
</center>

You need to put:
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
inside the complete option, because that is a function to call once the animation is complete. See jQuery doc about animate.
Your code should be:
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false, complete: function(){
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
}});
});
DEMO

You should use callback function and .stop() instead of queue: false:
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").stop().animate({
bottom: "120px",
opacity: 0
}, 1000, function() {
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
});
});

The effect you're after isn't very clear, but there are a couple of mistakes in your snippet:
You didn't include jQuery.
You had a handler attached to the click event from the markup that doesn't exist (and is not needed since you're attaching an event from code).
You're code first set the animate to 0 part, and then set the initial state (opacity 1).
You don't really need to set the display attribute every time.
Try this fixed fiddle
$("#clicker").click(function(){
$("#fading_dolar").css({
bottom: "0px",
opacity: 1
}); $("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false});
});
#fading_dolar {
display: block;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clicker">Click!</button>
<center><span id="fading_dolar">+$1</span></center>
EDIT: There were a few other bugs / mistakes there. "bottom:": is wrong, and you should "start again" from 0px, not 60px. Also moved basic style to CSS (no need for code), and added the required "position: relative" attribute.

Related

Check a div postion when -100% left

im trying to check a div position so when it comes to -100% left it returns to right 100%.
Im sutck in the part of checkin its position. Im using the console.log to check if it works, ive tried console.log(back1X.left) to.
$(document).ready(function(){
setInterval(function() {
var back1X = $('.back1').position();
},100);
$('.back1').animate({'left':'-100%'},50500);
console.log(back1X);
});
You can use jQuery .animate()'s complete callback to call a function when the animation ends:
$(document).ready(function() {
(function loop() {
$('.back1').css('left', '100%').animate({
'left': '-100%'
}, 2000, "linear", loop);
})();
});
.back1 {
position: absolute;
top: 0;
left: 100%;
padding: 1em;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back1"></div>

Jquery animate get stuck

function slideRight() {
// slide to right
$("div").animate({
left: "200px"
}, 2000, function() {
slideLeft();
});
}
function slideLeft() {
// slide to left
$("div").animate({
left: "0px"
}, 2000, function() {
slideRight();
});
}
$(document).ready(function() {
$("#start").on("click", function() {
slideRight();
});
});
I have TWO divs and I want to move them back and forth at the same time.
<div style="top:100px;"></div>
<div style="top:300px;"></div>
the css code:
div {
background: yellow;
height: 100px;
position: absolute;
width: 100px;
left:0px;}
However, the animation get stuck and become much slower after each slide. One div is OK. The more divs, the longer the time get stuck. Why?
Try adding something like :
$("div").stop().dequeue().animate({
...
I think the problem is, your functions call themselves inside another animate function with a never ending cycle which causes delay on each call. Instead I'm stopping the cycle on second function and start again with timeout which breaks the loops and delay too and start again. DEMO
$(document).ready(function() {
slideRight();
});
function slideRight() {
// slide to right
$("div").animate({
'left': "200px"
}, 1000, slideLeft);
}
function slideLeft() {
// slide to right
$("div").animate({
'left': "0px"
}, 1000);
setTimeout(slideRight, 1000);
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#second {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div><div id="second"></div>

Jquery showing and hiding div on .hover()

I am trying to use the .show("blind", "slow") Jquery-ui Effects and the .hide("blind", "slow") with .hover(). I would like to .hover() on the button and show the div, then by leaving the button I would .hide("blind", "slow"). The problem is if I leave to quickly and the div is not completely shown, then I will not go back to show to his full height once hovering back again.
This is my code and I include the js fiddle
HTML Code
<div id="state-slider">
My Slider
</div>
<button id="trigger">
Button
</button>
CSS Code
#state-slider {
position: fixed;
top: 50px;
left: -270px;
width: 500px;
min-height: 100px;
background-color: #ff9000;
}
Jquery
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop().show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop().hide("blind", "slow");
});
});
Thanks a lot
Fabrizio
edit:
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop(false, true).show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop(false, true).hide("blind", "slow");
});
try it this way, so it jumps to the end of any animation if you quickly hover over and back again

Simple JQuery Fade In/Out

So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});​
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.

JQuery Animate

Really easy, I'm sure...
I have a div which is the full screen and I want it to slide down from the top to the bottom.
I have this:
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?
Thanks
Your exact code works fine when you have absolute positioning on the element.
http://jsfiddle.net/hhEJD/
CSS
body {
padding: 0;
margin: 0;
}
#full-screen {
background: orange;
color: white;
width: 100%;
height: 100%;
position: absolute; // position absolute, and your code works
clip:auto;
overflow:hidden;
}​
HTML
<div id="full-screen"></div>​
Your code
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.
You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.
$('#slide2').animate(
{height: '0px'},
{
duration: 1000,
queue: false, //Disable the queue so both events happen at the same time.
complete: function()
{
// animation complete
}
}
).animate( //also animate the top property
{top: '500px'},
{duration: 1000}
);​
Try it out over at jsFiddle.
You can use marginTop for it:
var h=$('#full-screen').height();
$('#full-screen')
.animate(
{marginTop: h, height: 'toggle'},
1000,
function() {
// Animation complete.
}
)
see at: http://jsbin.com/esotu3

Categories