I am wondering if it's possible to repeat the same properties in the jQuery .aniamte() function. For example, if I have a green square and I want to move it to the right, then down and again right. How can I do it? I tried writing the first .animate() function again, but it didn't work.
$(document).ready(function(){
$("div").animate({left: "100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
The easiest way is to use +=.
$(document).ready(function(){
$("div").animate({left: "+=100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "+=100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Your square isn't moving further because it is already left: 100px
If you would like your square to move further, you need to add more to x/y!
Forgive how rudimentary the loop is but:
var x = 100;
var y = 100;
for(var x=100; x<500; x+=100){
$('div').animate({left:x+"px"}, 'slow')
.animate({top:y+"px"}, 'slow');
y+=100;
}
jsfiddle
Just wrap it in a recursive function (jsfiddle):
function anim(){
$("div").animate({left: "100px"}, "slow")
.animate({top: "100px"}, "slow")
.animate({left: 0}, "slow")
.animate({top: 0 }, "slow", function(){ anim(); });
}
anim();
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
The div has already left: "100px" after the first animate(), if you want to add extra 100px it should be left: "+=100px" in the next iteration.
Do you mean something like :
$(document).ready(function(){
$("div").animate({left: "100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "+=100px"}, "slow");
$("div").animate({top: "+=100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Related
I have a CSS class that has left-margin: 150px and I just want to function it in an animated way.
ToggleClass in jQuery works but without any animation.
$(this).toggleClass("active", 1000, "easeInOutQuad");
I managed to do it animated using addClass and removeClass. But I am wondering if there is any easier way to do it. it takes 10 lines of code while there should be something much more efficient.
Any ideas?
$(".box").on('click tap', function() {
if($(this).hasClass('active')){
$(this).animate({
marginLeft: "-=150px",
}, 500, function() {
$(this).removeClass('active');
});
}else{
$(this).animate({
marginLeft: "+=150px",
}, 500, function() {
$(this).addClass('active');
});
}
});
// $(this).toggleClass("active", 1000, "easeInOutQuad");
.box{
width: 100px;
height: 100px;
background-color: red;
}
.active{
margin-left: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"> BOX </div>
I'd use CSS transition to do it. Add transition: margin-left 0.5s; (or similar) to your .box style rules:
$(".box").on('click tap', function() {
$(this).toggleClass('active');
});
.box {
width: 100px;
height: 100px;
background-color: red;
transition: margin-left 0.5s; /* <== */
}
.active {
margin-left: 150px;
}
<div class="box"> BOX </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have one div hidden out of page and one part is visible like:
div{
left: -100px;
width: 150px;
height: 50px;
}
I used jquery to show whole div:
$("div").hover(function(){
$("div").animate({left: '0px'});
},function(){
$("div").animate({left: '-100px'});
});
When I hover over the div and quickly unhover over it multiple times, It seems to play the animation the same amount of times I do this. How can I make it stop mid-animation if I stop hovering over the div, and how can I make the animation start only after I have hovered over it for a certain amount of time.
You can use .stop() to stop the previous animation.
$("div").hover(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, function() {
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
If you want it to wait until you've been hovering for a bit before the animation starts, you can use setTimeout, and you can cancel the timeout in the unhover function.
var hoverTimer;
$("div").hover(function() {
hoverTimer = setTimeout(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, 1000);
}, function() {
clearTimeout(hoverTimer);
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I tried to position the dialogue box at the bottom right corner of the page, but I was unsuccessful.
What am I doing wrong?
<script>
$(function() {
$("#dialog").dialog();
{
position: fixed;
right: 0;
bottom: 0;
}
});
</script>
Check out my codepen. You can add a position (see the docs) to a dialog. This is the full jQuery code:
$(function() {
$( "#dialog" ).dialog({
position: {
my: "left top",
at: "right bottom"
}
});
});
You can use jQuery.css() to apply the CSS rules.
$(function() {
// $('#dialog').dialog();
$("#dialog").css({
'position': 'fixed',
'bottom': 0,
'right': 0
});
});
div {
width: 100px;
height: 100px;
background: url('//placehold.it/100x100');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>
But there shouldn't be any reason to use jQuery to do this, as it is completely possible with CSS alone.
div {
width: 100px;
height: 100px;
background: url('//placehold.it/100x100');
position: fixed;
bottom: 0;
right: 0;
}
<div id="dialog"></div>
I'm always having trouble with the combination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, slow);
});
});
</script>
<div id="hello">
Hello World!
</div>
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
}
</style>
Your div needs a position set when using left, right, top or bottom css propertiy, so there will be no change even though your code seems correct.
Try to set a position to your div, for example relative.
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
position: relative;
}
</style>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, 'slow');
});
});
</script>
If You are using slow/fast option You need to put 'slow' into brackets
jQuery("#hello").animate({ left: '150px' }, 'slow');
You can set animation time with milliseconds without brackets.
The duration parameter of your animate() is undefined (Uncaught ReferenceError: slow is not defined).
It should be either "slow"
jQuery("#hello").animate({ left: '150px' }, "slow");
or
var slow = 200;
jQuery("#hello").animate({ left: '150px' }, slow);
Fiddle (with error)
Fiddle (Updated)
I would recommend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.
i have this stack of divs that changes z-index on click. When a new div gets the highest z-index being placed on top i want to animate the height of it. from 0 to 100p, so it looks like it "grows".
Anyone that can help on this?
jsFiddle: http://jsfiddle.net/nfp17etg/2/
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
position: relative;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0;
}
.holder div.current{
z-index:1;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
$("button").click(function(){
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
}
else {
$(".current").removeClass("current").next().addClass("current");
}
});
Try this one
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
check jsFiddle demo: