I've made a simple animation of a balloon moving from left to right side of the screen, but I want to make it as a parabolic movement instead of linear animation. Also I want to hide it from left site instead of starting on left:0;
Here's my actual code
$(document).ready(function() {
function loop() {
$('#promo').css({
left: 0
});
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
loop();
});
#promo {
position: absolute;
z-index: 500;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
<img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>
Adjust the left property of the balloon to -50px, so it's not visible at the start of the animation.
Also, to stop the scrollbars appearing, give the container of the balloon overflow: hidden. You could then use jQuery/JavaScript to adjust the width of the container to fit the browser's viewport on document ready, and window resize.
CSS
.balloon-container {
position: relative;
height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}
.balloon {
position: absolute;
left: -50px;
}
jQuery
$(document).ready(function() {
function sizeContainer() {
$('.container').css('width', window.innerWidth);
}
function loop() {
$('.balloon').css('left', '-50px');
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
// Run initial functions.
sizeContainer();
loop();
$(window).resize(function() {
// Re-run functions on window resize.
sizeContainer();
});
});
Related
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>
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>
What I'd like to do is animate a small image as well as a div (or an image within a div) from the right to the left of the screen, repeating once the image/div leaves the screen.
I found an example online that moves an image/div from left to right, but not all the way to the other side of the screen, and I am struggling to make it from right to left.
Here's what I have been doing
function moveTruck() {
$("#ImageToMove").animate({
"margin-right": "5000px"
}, 3000, function () { $("#ImageToMove").css("margin-right", "10000"); moveTruck(); });
}
moveTruck();
Playing with the margin-right values. My CSS class is:
.HomeImageAnimate{
position:absolute;
margin-top:80px;
right:1000px;
}
Try setting , animating left property using values of window.innerWidth , container element width
(function fx(el) {
$(el).css("left", window.innerWidth)
.animate({
left: "-" + (window.innerWidth - $(el).width() * 2)
}, 3000, "linear", function() {
fx(this)
})
}($("div")))
body {
overflow: hidden;
}
div {
width: 50px;
height: 50px;
position: absolute;
}
img {
background: gold;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<img />
</div>
Try this out, this truck div repeatedly goes from right to left.
HTML:
<div class="truck"></div>
CSS:
body{
background: green;
overflow: hidden;
}
.truck {
margin-top:20px;
width: 272px;
height: 174px;
cursor:pointer;
position: absolute;
margin-right: -150px;
z-index: 3;
background: red;
border-radius:4px;
width:200px;
height:50px;
}
JS:
$(function() {
var moveTruck = function(){
$(".truck").delay(2000).animate( {'right': '120%' }, 5000,'linear',function(){
$(this).css({'right': '-50px'});
moveTruck();
});
}
moveTruck();
})
CODEPEN DEMO
function move(){
width = $(window).width();
objectWidth = $('#demo').width();
margin = width + objectWidth + 'px';
restart = -100 - objectWidth + 'px';
$('#demo').animate({
'margin-left': margin
}, 3000, function(){
$('#demo').css('margin-left', restart);
move();
});
}
move();
Try this out, it calculates the exact width of object and window - should always work no matter the screen size. You were trying to use an absolute pixel value, won't always work.
https://jsfiddle.net/w9pgmm9d/3/
i was working on this div animation where the original position of div from top is 70% and the div is absolute.
Now, when I click on button it slides to bottom of page with top:95%.
Now I want to check if the position is top:95% and if so, then i want to slide it back to top:70%;
Somehow the Div slides to 95% but dosent come back. what i am doing wrong here??
code
css:-
#mainMenu {
width: 100%;
height: 30px;
background-color: black;
top: 70%;
position: absolute;
}
body {
margin: 0px;
}
#clickToCheck {
font-size: 22px;
}
JQuery
<script>
$(document).ready(function () {
$('#mainMenu').click(function () {
$("#mainMenu").animate({ top: "95%" }, 1100);
});
});
$(document).ready(function () {
$('#clickToCheck').click(function () {
if ($('#mainMenu').position().top === '95%') {
$("#mainMenu").delay(1000).animate({ top: "70%" }, 1200);
} else {
alert('its not at bottom');
}
});
});
and Html
<body>
<span id="clickToCheck">Click to CHeck</span>
<div id="mainMenu"></div>
The problem is that the function
$('#mainMenu').position().top
Will return the value in pixels instead of percentage. So if you want to check if the top is 95% you will have to do the math based on the top and window height (or div height). here is the code:
$('#mainMenu').position().top/$(window).height()*100
Here you will have the the percentage of the #mainMenu in relation to the full window. If the #mainMenu is inside a div, just do based on the div's height. Also beware that you will probably get a number like 94.2343123. So when checking, I would not do and "if = 95". I would do something like "if >= 93" or something like it.
The basic problem is that .position(), .offset(), and .css() all work in pixels by default.
A reasonable workaround would be to store the the menu's original .offset() using .data() and just check to see if its offset has changed, like so:
Working Example
$(document).ready(function () {
$('#mainMenu').data('startPos', $('#mainMenu').offset().top); // when the doc is ready store the original offset top.
$('#mainMenu').click(function () {
$("#mainMenu").animate({
top: "95%"
}, 1100);
});
$('#clickToCheck').click(function () {
if ($('#mainMenu').offset().top > $('#mainMenu').data('startPos')) { // if new offset is greater than original offset
$("#mainMenu").delay(1000).animate({
top: '70%'
}, 1200);
} else {
alert('its not at bottom');
}
});
});
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