Bouncer plugins in jquery - javascript

I am looking for a jquery plugin that bounces a div element periodically infinite times. I have no such example website to show, but what I want is a div element that bounces to right(say) and bounces back to left. And at the time of bounce I want to change the content. Also bounce should go on. It should not stop or slow down.
I searched in
http://jquery.com/
http://mootools.net/
but found nothing that I wanted. There is bounce that stops after sometime.
Can you please help me?

If I have interpret your description correctly, you want a div that moves left and right continuously and changes content on "arrival". I'm still not sure if you want to toggle content or loop through more content.
A little illustration to clarify:
__________ __________
| | >>>>>>>>>>>>>>>>>> | |
| content1 | | content2 |
|__________| <<<<<<<<<<<<<<<<<< |__________|
|---------------------------------|
content change content change
Now, because the VERY specific request, I highly doubt there's such a plugin available. You just have to be creative yourself! Luckily, I'm a nice guy and save you some work.
See the online demo.
My javascript function:
function startBouncing(selector, content, duration, easing) {
// get the required movement (parent width - element width)
var movement = $(selector).parent().width() - $(selector).width();
var contentIndex = 0; // we want to start with content index 0
// define function that makes element go forth
var goForth = function() {
// start animation and change text
$(selector).animate({
'margin-left': movement
}, duration, easing, goBack).children('p:first').html(content[contentIndex % content.length]);
contentIndex++; // increment index for next time
};
// define function that makes element go back
var goBack = function() {
// start animation and change text
$(selector).animate({
'margin-left': 0
}, duration, easing, goForth).children('p:first').html(content[contentIndex % content.length]);
contentIndex++; // increment index for next time
};
// start the sequence
goForth();
}
Which I call using:
var content = [
'content #1',
'content #2',
'content #3'
]; // if you wish to toggle, just use 2 elements
// calling the function
startBouncing('#bouncer', content, 2000, 'linear');
And finally, the HTML:
<div style="background-color: gray; height: 50px; width: 500px;">
<div id="bouncer" style="background-color: #ff0000; height: 50px; width: 50px;">
<p>content</p>
</div>
</div>
It might not look good, but it works. I haven't spend a second in optimizing the code.
edit
I've edited the function so you specify a different duration and easing per side.
function startBouncing(selector, content, duration1, duration2, easing1, easing2) {
// get the required movement (parent width - element width)
var movement = $(selector).parent().width() - $(selector).width();
var contentIndex = 0; // we want to start with content index 0
// define function that makes element go forth
var goForth = function() {
// start animation and change text
$(selector).animate({
'margin-left': movement
}, duration1, easing1, goBack).children('p:first').html(content[contentIndex % content.length]);
contentIndex++; // increment index for next time
};
// define function that makes element go back
var goBack = function() {
// start animation and change text
$(selector).animate({
'margin-left': 0
}, duration2, easing2, goForth).children('p:first').html(content[contentIndex % content.length]);
contentIndex++; // increment index for next time
};
// start the sequence
goForth();
}
For more advanced easing strings, you should use an plugin that adds more easing strings like this one.

use should combine the animate function using an cool bouncing easing effect (requires jquery ui). i order to make it bounce repeatedly, use the setTimeout function..

Related

jQuery animate() Sequence Out of Order when Hovering Speedily

I've created an animation with jQuery which sequentially (in reverse) slides in lines of texts. It's pretty simple and works great when hovering once. When rapidly moving the mouse around however, the lines will animate in a seemingly random order.
Please see the GIF below for a demonstration. The first hover is how the animation should look. After that hover, I moved my mouse in and out to demonstrate the issue with the text lines animating at random.
Please see an example of my code below:
HTML
<div class="image-block">
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
<p>Text Line 4</p>
<p>Text Line 5</p>
</div>
CSS
/* Hide text lines to begin with */
.image-block {
position: relative;
overflow: hidden;
background-image: url('background-image.png');
}
.image-block p {
position: absolute;
left: -120%
}
jQuery
jQuery(document).ready(function() {
// Animate text lines on hover with CSS 'left'.
jQuery('.image-block').hover(function() {
jQuery.fn.reverse = [].reverse;
time = 0;
speed = 300;
jQuery(this).find('p').reverse().each(function() {
jQuery(this).stop(true).delay(time).animate({
left: '0'
}, speed,
function() {
jQuery(this).stop(true).delay(time).animate({
left: '0'
}, speed);
})
time = time + 125;
speed = speed - 25;
});
}, function() {
// Animate text lines on hover release with CSS 'left'.
jQuery(this).find('p').reverse().each(function() {
jQuery(this).stop(true).animate({
left: '-120%'
}, 150)
});
});
});
How is it possible for the top two lines to animate first when rapidly moving the mouse? Do I need to reset my animation somehow after hover has been released? I added stop(true) to the animation but this hasn't fixed the problem.
Thank you in advance.
It got me scratching my head as well. As I've worked out this before, but for the sake of explanation had to go in detail.
The problem is with .delay() method which you're using with animation. When you add delay to animation, it can't be cleared. So when you hoverIn/hoverOut very fast, the handlers from previous hover events are not cleared and some p tags are animated out of order. For detailed explanation about .delay() check the selected answer here StackOverflow or better jQuery delay
About the solution to your problem. You can use setTimeout as a replacement for delay. I've made this jsfiddle as a workaround to solve your problem using setTimeout.
You can do it this way with setTimeout:
jQuery(document).ready(function() {
// Animate text lines on hover with CSS 'left'.
// To store setTimeout response
var animations = new Array(5);
jQuery('.image-block').hover(function() {
jQuery.fn.reverse = [].reverse;
time = 0;
speed = 300;
jQuery(this).find('p').reverse().each(function(index, item) {
// Clear previous handlers
clearTimeout(animations[index]);
// Set new handlers and add to `animations`
animations[index] = setTimeout(function(){
jQuery(item).stop(true).animate({
left: '0'
}, speed);
}, time);
time = time + 125;
speed = speed - 25;
});
}, function() {
// Animate text lines on hover release with CSS 'left'.
jQuery(this).find('p').each(function(index, item) {
// Clear previous handlers
clearTimeout(animations[index]);
jQuery(item).stop(true).animate({
left: '-120%'
}, 150);
});
});
});
You need to save setTimeout return values to a variable when adding animation for hover(MouseIn), so that you can clear those at the time of MouseOut. If You need more explanation about the fiddle, please comment back.
UPDATE: .clearQueue() was not actually needed, so removed it and updated the fiddle code as well.

Using a jquery slider for text instead of images?

This may be a little too specific, but I have a jquery slider that I am using <p> classes instead of images to cycle through customer quotes. Basically the problem I am running into right now is when it is static and non moving (JS code is commeneted out) they are aligned how I want them to be. As soon as the JS is un commented, they stretch out of view and you just see a white box?
Any ideas?
How I want each panel to look like:
jsfiddle
So I sort of made this my Friday project. I've changed a whole lot of your code, and added a vertical-align to the quotes and authors.
Here's the fiddle http://jsfiddle.net/qLca2fz4/49/
I added a whole lot of variables to the top of the script so you could less typing throughout.
$(document).ready(function () {
//rotation speed and timer
var speed = 5000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
Since you used a % based width I'm setting the pixel widths of the elements in case the screen is reszed
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
As you had, I'm rearranging the slides in the event the back button is pressed
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
I combined the prev and next click events into a single function. It checks for the ID of the element targeted in the click event, then runs the proper previous or next functions. If you reset the setInterval after the click event your browser has trouble stopping it on hover.
//if user clicked on prev button
$('#buttons a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
//cancel the link behavior
return false;
});
I've found mouseenter and mouseleave to be a little more reliable than hover.
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
I broke this in to its own function because it gets called in a number of different places.
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
And here's your rotation timer.
function rotate() {
$('#next').click();
}
It took me a little bit, but I think I figured out a few things.
http://jsfiddle.net/qLca2fz4/28/
First off, your console was throwing a few errors: first, that rotate wasn't defined and that an arrow gif didn't exist. Arrow gif was probably something you have stored locally, but I changed the 'rotate' error by changing the strings in the code here to your actual variables.
So, from:
run = setInterval('rotate()', speed);
We get:
run = setInterval(rotate, speed);
(No () based on the examples here: http://www.w3schools.com/jsref/met_win_setinterval.asp)
But I think a more important question is why your text wasn't showing up at all. It's because of the logic found here:
$('#slides ul').css({'left' : left_value});
You even say that this is setting the default placement for the code. But it isn't..."left_vaule" is the amount that you've calculated to push left during a slide. So if you inspect the element, you can see how the whole UL is basically shifted one slide's worth too far left, unable to be seen. So we get rid of 'left_value', and replace it with 0.
$('#slides ul').css({'left' : 0});
Now, there's nothing really handling how the pictures slide in, so that part's still rough, but this should be enough to start on.
Let me know if I misunderstood anything, or if you have any questions.
So, a few things:
1) I believe you are trying to get all of the lis to be side-by-side, not arranged up and down. There are a few ways to do this. I'd just make the ul have a width of 300%, and then make the lis each take up a third of that:
#slides ul {
....
width: 300%;
}
#slides li {
width: calc(100% / 3);
height:250px;
float:left;
}
2) You got this right, but JSFiddle automatically wraps all your JS inside a $(document).ready() handler, and your function, rotate needs to be outside, in the normal DOM. Just change that JSFiddle setting from 'onload' to 'no wrap - in head'
3) Grabbing the CSS value of an element doesn't always work, especially when you're dealing with animating elements. You already know the width of the li elements with your item_width variable. I'd just use that and change your code:
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
$('#slides ul').animate({'left' : left_indent}, 1500, function () {
to:
$('#slides ul').stop().animate({'left' : -item_width * 2}, 1500, function () {
4) Throw in the .stop() as seen in the above line. This prevents your animations from overlapping. An alternative, and perhaps cleaner way to do this, would be to simply return false at the beginning of your 'next' and 'prev' functions if #slides ul is being animated, like so:
if ($('#slides ul').is(':animated')) return false;
And I think that's everything. Here's the JSFiddle. Cheers!
EDIT:
Oh, and you may also want to clearInterval at the beginning of the next and prev functions and then reset it in the animation callback functions:
$('#prev').click(function() {
if ($('#slides ul').is(':animated')) return false;
clearInterval(run);
$('#slides ul').stop().animate({'left' : 0}, 1500,function(){
....
run = setInterval('rotate()', speed);
});
});

Slide boxes with margin-left check if overslided

I made a simple content/box slider which uses the following javascript:
$('#left').click(function () {
$('#videos').animate({
marginLeft: '-=800px'
}, 500);
});
$('#right').click(function () {
$('#videos').animate({
marginLeft: '+=800px'
}, 500);
});
Here is the demo: http://jsfiddle.net/tjset/2/
What I want to do and I can't figure out how to show and hide arrows(left and right box) as the all the boxes slided.
So I clicked 4 time to the LEFT and slided all the boxes! then hide "left" so that you can't give more -800px
What can I do?
What you can do is check after the animation completes to see if the margin-left property is smaller or larger than the bounds of the video <div>. If it is, depending on which navigation button was clicked, hide the appropriate navigation link.
Check out the code below:
$('#left').click(function () {
// reset the #right navigation button to show
$('#right').show();
$('#videos').animate({
marginLeft: '-=800px'
}, 500, 'linear', function(){
// grab the margin-left property
var mLeft = parseInt($('#videos').css('marginLeft'));
// store the width of the #video div
// invert the number since the margin left is a negative value
var videoWidth = $('#videos').width() * -1;
// if the left margin that is set is less than the videoWidth var,
// hide the #left navigation. Otherwise, keep it shown
if(mLeft < videoWidth){
$('#left').hide();
} else {
$('#left').show();
}
});
});
// do similar things if the right button is clicked
$('#right').click(function () {
$('#left').show();
$('#videos').animate({
marginLeft: '+=800px'
}, 500, 'linear', function(){
var mRight = parseInt($('#videos').css('marginLeft'));
if(mRight > 100){
$('#right').hide();
} else {
$('#right').show();
}
});
});
Check out the jsfiddle:
http://jsfiddle.net/dnVYW/1/
There are many jQuery plugins for this. First determine how many results there are, then determine how many you want visible, then use another variable to keep track with how many are hidden to the left and how many are hidden to the right. So...
var total = TOTAL_RESULTS;
var leftScrolled = 0;
var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time.
instead of using marginLeft I would wrap all of these inside of a wrapper and set the positions to absolute. Then animate using "left" property or "right". There's a lot of code required to do this, well not MUCH, but since there are many plugins, I think you'd be better off searching jquery.com for a plugin and look for examples on how to do this. marginLeft is just not the way to go, since it can cause many viewing problems depending on what version of browser you are using.

JQuery shaking effect with some tilt/rotation

I am trying to create an effect where on button click, the div would shake left and right and tilt about 10deg each way so it looks like a natural motion when shaking an object with two hands. I am able to create the left and right shaking effect but can't seem to tie it in with rotation. I also need this to work in IE8, so css3 is not an option. I am using JQuery UI and .rotate() but if there is a better way please let me know. I need this to shake about 3-4 times on button click.
<div class="container">
<div class="globe-main" id="globe">
<div class="content"></div><!-- end .content -->
</div><!-- end .globe-main -->
</div><!-- end .container -->
<script>
var times = 4;
var loop = setInterval(rota, 300);
function rota() {
times--;
if(times === 0){clearInterval(loop);}
$(".globe-main").rotate({animateTo:10, duration: 500, });
//$(".globe-main").effect("shake", { times:3, distance:30 }, 800);
}
rota();
</script>
Here is what I have so far FIDDLE
Thank you
UPDATE
Here is the updated FIDDLE
jQuery has no method called rotate. This is probably where the problem lies.
Edit
Based on your comments, you could create your own queue I guess...
rotationAnimationQueue = {
queue: [],
addAnimation: function( $jQueryObject, params ) {
// add animation to the queue
this.queue.push( {
$jQueryObject: $jQueryObject,
params: params
} );
// if only animation in queue, begin processing
if ( this.queue.length === 1 ) this.processQueue();
},
processQueue: function() {
var self = this;
var animation = this.queue[ 0 ];
animation.params.callback = function() {
self.queue.shift();
if ( self.queue.length > 0 ) self.processQueue();
};
animation.$jQueryObject.rotate( animation.params );
}
};
See it in action here: http://jsfiddle.net/UnyYh/1/
You may want to modify the queue code so that it keeps track of one queue per jQuery object. This way if needed you could have shake animations happening on multiple objects at the same time instead of always doing the animations in sequence.

set the size of the element when using animation in javascript

I want to use some animation in my page,so I google "javascript animation",I found this wonderful tutorial:
The JavaScript animation is implemented as gradual changing of DOM element styles or canvas objects.
The whole process is split into pieces, and each piece is called by
timer. Because the timer interval is very small, the animation looks
continuous.
So it seems that the dom animation is implemented by set the size of the element step by step.
This is the The generic animation provided by the tutorial:
function animate(opts) {
var start = new Date
var id = setInterval(function() {
var timePassed = new Date - start
var progress = timePassed / opts.duration
if (progress > 1) progress = 1
var delta = opts.delta(progress)
opts.step(delta)
if (progress == 1) {
clearInterval(id)
}
}, opts.delay || 10)
}
However I found that if an element in the page does not have the "width or height" property in its "style" property. How can we use them??
Now,suppose I have an element in the page with id "tip_info" who does not show at first,when I click an button,I want it opend with the animation.
<div id="wrapper" sytle="display:none">the content</div>
<input type="button" onclick="animate()" value="open"/>
Now,I try to use the generic animation:
var ele=document.getElementById('wrapper');
animate({
delay: 10,
duration: duration || 1000, // 1 sec by default
delta: delta,
step: function(delta) {
ele.style.width= The_Final_Width*delta + "px";
ele.style.height= The_Final_Height*delta + "px"
}
});
But how can I know the "The_Final_Width" and "The_Final_Height" value???
Its width and height should be changed according to the content inner the element.
Even when the animation complete,normally,the element does not need the "width" and "height" attrubutes,it just need the "display='block'".
So does it mean that an element want to be animated must have the explict size?
I would do it in three steps:
Use a jQuery function or a custom function to quickly display:block the div, get its size (width/height), and display:none again. It would be so fast that a human eye can't see it.
Animate with the width/height I got previously
At the end of the animation, I would set width/height to auto or initial. So if you add some content in it, it will increase its size automatically.

Categories

Resources