I'm trying to use math.random to animate the characters of these words by a random amount with math.random and it isn't working.
Is it a problem with my math DEMO
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
var moveup=parseInt((Math.random()* document.body.clientHeight) - document.body.clientHeight);
var moveleft=parseInt((Math.random()* document.body.clientWidth) - document.body.clientWidth);
chars.each(function(idx,obj) {
$(obj).animate({
left: moveleft,
top: moveup
});
});
});
This is what I'm trying to get work first. There is an error here.
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
chars.each(function() {
$(this).animate({
left: 100,
top: 100
}, 500);
});
});
#KevinB
I needed to give the effected element a position of relative. Here is the working code and demo.
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
chars.each(function() {
var moveup=parseInt((Math.random()* document.body.clientHeight) - document.body.clientHeight);
var moveleft=parseInt((Math.random()* document.body.clientWidth) - document.body.clientWidth);
$(this).css({
position: 'relative',
left: 0
})
.animate({
left: moveleft,
top: moveup
}, 1500);
});
});
DEMO
However it still isn't animating a negative amount, anyone know a formula to create a random negative number?
Related
i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});
You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().
I have an element div in a shape of a ball. What I am trying to do is, when I refresh the page I want to the ball to fall to the bottom of the webpage and then bounce back up to the top of the page.
This is my jQuery function where the ball falls to the bottom of the web page
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
});
Am I using a correct approach? Should I use slideDwon and slideUp instead?
Try utilizing jQuery UI .effect()
$(function() {
var div = $("div");
// `elem`: element to apply bounce effect,
// `n`: number of bounce effects to apply to `elem`
var bounce = function bounce(elem, n) {
var fx = function fx(el) {
return (el || $(this))
.effect({
effect: "bounce",
easing: "swing",
duration: 400,
distance: window.innerHeight
- (el.height() + el.offset().top * 1.5),
direction: "down",
times: 1
}).promise()
};
return fx(elem).then.apply(elem, $.map(Array(n - 1), function() {
return fx(elem)
}));
};
bounce(div, 1).then(function(el) {
// do stuff when bounce effect complete
console.log("complete", el)
});
});
div {
position: relative;
width: 100px;
height: 100px;
background: rgb(212, 98, 44);
border: 2px solid navy;
border-radius: 50%;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>
Take advantage of jQuery's animation chainability. Also, you probably shouldn't assume a static value of 585 will be suitable for every screen size. I suggest using calculated values for generating the offsets, check this fiddle:
$(document).ready(function () {
var viewportH = $(window).height();
var elem = $('div');
var elemH = elem.height();
elem.animate({
top: '+=' + (viewportH - elemH) // bottom of screen
}, 400).animate({
top: '-=' + (viewportH - elemH) // original position
});
});
Using this HTML :
<div id="myDiv" class="myRelativeDiv">test</div>
1st step is to set the position of your div as "relative" :
.relative {
position:relative;
}
2nd step is animate with Jquery (You can chain many animate):
$(function() {
$("#myDiv").animate({ top: '+=585'}, 400).animate({ top: '0'}, 400);
});
JsFiddle
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
setTimeout(
function()
{
$("div").animate({ top: '-=585'}, 400);
}, 400);
});
I have a table on the right of my page( with id="efficacia"). I wrote this JS script in order to shift left/right clicking on it
JavaScript
$("#efficacia").click(function() {
var posizione = $("#efficacia").position();
if(posizione.right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '-202'
}, 1000);
}
});
CSS
#efficacia {
position: fixed;
right: -202px;
top: 200px;
cursor: pointer;
z-index: 100;
}
My script works well for the first "click", then when I click again it does not shitf on the right of 202px. It looks like that function does not enter in else statemet.
position().right does not exist. Only top and left.
http://api.jquery.com/position/
Base your condition on left attribute and it will work
position doesn't return a right property.
You can get the right css property so:
$("#efficacia").click(function() {
var right = parseInt($(this).css('right'));
if(right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '202'
}, 1000);
}
});
See the DEMO.
If you want get position of all corners then you can use getBoundingClientRect(). It will returns bottom, right, left, top, width and height of your div. But, of course, it will return values that starts from left corner.
var boundingBox = $(this).get(0).getBoundingClientRect();
console.log(boundingBox.right);
Read about getBoundingClientRect()
There's an error in your code at right: '-202'. You have to specify right: '-202px'.
Here's the updated code:
$("#efficacia").click(function() {
var right = $(this).css('right');
if(right != "0px") {
$(this).animate({
right: '0px'
}, 1000);
} else {
$(this).animate({
right: '-202px'
}, 1000);
}
});
That's it
jQuery.position() doesn't return value for style.right. It returns only
Object{top: somVal, left: somVal}
so if u want to get the value of right then get it from style attribute
Eg-
$("#efficacia").click(function() {
// var posizione = $("#efficacia").position();//here right is undefined
var right=this.style.right.replace("px", "") * 1;//fetch value of right from style
if(right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '202'
}, 1000);
}
});
I have an element which should be animated all the time.
The animated element has such CSS properties:
#world {
height: 100%;
max-height: 100%;
position: relative;
display: flex;
background :red;
}
I can only move the element to a particular way, like this:
$('#world').animate({right: "2000px", easing: "linear"}, 2000);
But this will just animated for 2000px my element has an endless width.
UPDATE:
ALL 7.5 Sec. #world become bigger.
FIDDLE
You can have a recursive function:
var anim;
anim = function(times) {
$('#world').animate({
right: 2000 * times
}, 2000, 'linear');
return anim(times + 1);
};
anim(1)
This will continue to move #world to the right, 1 pixel per millisecond.
With a step callback:
var anim, my_step_callback;
my_step_callback = function() {
return $('body').append("<p>Hello</p>");
};
anim = function(times) {
$('#world').animate({
right: 2000 * times
}, {
duration: 2000,
easing: 'linear',
step: my_step_callback
});
return anim(times + 1);
};
Good luck!
Why not use right: 100%?
Assuming im reading your question correctly.
You could always do something like this, Where the function calls itself over and over again each time the animation ends.
function moveMe() {
$('#world').animate({width: '+=100px', easing: "linear"}, 2000, moveMe);
}
Why not set the righta value to the width of the element
var width = $('#world').width();
$('#world').animate({right: width, easing: "linear"}, 2000);
You could also increment the value of right as follows
DEMO http://jsfiddle.net/meqk662p/
var counter = 0;
setInterval(function () {
++counter;
}, 100);
$('#world').animate({right: counter+"px", easing: "linear"}, 2000);
The above example would be infinite
try increment the right and call in the callback the same function
var world_right = 2000;
function endlessWorldStep(){
$('#world')
.animate({right: world_right + "px", easing: "linear"}, 2000, endlessWorldStep);
world_right = world_right + 100;
}
I have the following function set to run on a hover over an image:
function() {
$('.slides .slide h3').each(function(i){
var owidth = $(this).width()
$(this).animate({"right":730 - owidth - 16}, 500);
});
}
You can view the page here. Over the image and click the next icon on the lower right of the image. For some reason, the function is calculating the first h3's width correctly, but then it thinks all other h3s have a width of 0. Can anyone offer a solution?
function() {
var owidth = 0;
$('.slides .slide h3').each(function(i){
owidth = $(this).width();
$(this).animate({"right":(730 - owidth - 16) + 'px'}, 500);
});
}
A better way:
function() {
$('.slides .slide h3').each(function(i){
$(this).stop().animate({
"right": (714 - $(this).width()) + 'px'
}, 500);
});
}