jQuery plugin, shake .. - javascript

i have this code: http://jsfiddle.net/Ym4NP/2/ why the 'content' div does not move to up , move only to down ? and how i send $this ( selector ) to callback function ?

I would just use jQuery UI to do this effect.
See this fiddle:
http://jsfiddle.net/kEKtw/2/
With this code
$(document).ready(function() {
$('#main').effect("shake", {direction:'up', times:10}, 0);
});
Notes:
I changed the css to make the numbers add up or the UI code would have issues.
If you look at how jQUI implements shake you will see the "effects" stack is implemented as an array as I suggest below.
The reason positions should be an array:
What you really want to do is set up a sequence like this:
move up random amount
wait set time
move back to center
wait set time
move down random amount
However using positions as an object does not give ordering nor does it allow you to repeat commands (since ever command is an object property name which must be unique.)
If it was an array you could set up something like this to pass into the plugin:
positions: [
'U': -300,
'W' : 1000,
'C' : 0,
'W' : 1000,
'D': 300
],
Old answer
The code is complex, but your problem is simple.
At each "move" in the shake you change the relative location of the top or bottom to a new number from 1 to 300. This means the item will move between 1 and 300+object size. I believe what you want to do is move it between -300 and +300. To do this you will need to change the U command to set a value of -300 to 0 not 0 to 300
There is another error in the logic -- it does not reset the box to the center.

Related

How to change jquery animate() duration while animating using step

So here is the scenario. I'm trying to make a infinite image carousel, and everytime it will show an image that has a class of special .special I want to slow down the animation duration or the scrolling of the animation. So users can see the special image longer. Here is my code.
$photoGalleryList.animate({
left : '-' + (computedWidth) + 'px'
},
{
duration : 10000,
easing : 'linear',
step : function(now, fx) {
if(visibleSpecialImage()) {
// SLOW ANIMATION DURATION
// Tried setting fx.options.duration still no effect
}
}
});
I'm not sure if my approach is right (doing it with step), jquery animate() documentation says
step
Type: Function( Number now, Tween tween )
A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
I'm not sure if I understood the documentation clearly, But base on what I read it's possible using step, I tried googling my problem and never found any concrete answer So now I'm stackoverflowing and hopefully solve this problem. Thanks

jquery animation moving and stopping

I got a div with an image inside it using query
$('#super').animate({
left:'150px'
}, {
duration: 10000,});
What iam trying to figure out is how to stop and start animation. So for example it will start to move left 150px and then will stop for 2 seconds and then move left 300px.
Like this:
$('#super').animate({left : '-=150'}).delay(2000).animate({left : '-=300'});
Demo: http://jsfiddle.net/E7akr/
(You can add duration, easing and complete settings to the .animate() calls as desired - obviously the key thing here is the .delay() method.)

jQuery Possible to use the .fadeTo() more than once?

I am trying to write a script so that every time a specific button is pressed, I want to send out a warning message in a div tag. I decided to use the fadeTo because my div tag is inside a table and I dont want it to collapse. However, it seems like after the first press, any subsequent press will not work anymore. Does anyone know a workaround for this?
Here's my warning code:
$("#warning").html("The value is too low!").css('color','red').fadeTo(10000,0);
At the end of the fadeTo, the element's opacity is 0. To re-start, reset the opacity back to 100, since otherwise it's trying to animate from 0 to 0, which is...subtle to say the least. :-)
E.g.:
$("#warning")
.html("The value is too low!")
.stop() // <=== New bit: Stop the animation if it's running
.css({
'opacity': 1, // <=== New bit: Reset the opacity
'color': 'red'
})
.fadeTo(10000,0);
Live example | source (uses one second rather than ten)
You will have to show the div again:
$("#warning").show().html("The value is too low!").css('color','red').fadeTo(10000,0);
Another way is to use opacity animation instead:
$("#warning").html("The value is too low!").css({
color : 'red',
opacity : 1
}).stop().animate({
opacity : 0
}, 1000);
DEMO: http://jsfiddle.net/SDWmn/1/

Ajax Tooltip using Mootools not working

I would like to create a Mootools ajax tooltip with following script
new MooTooltips({
extra:{
0: {
'id':this.id,
'ajax':'http://www.fesn.cz/communities/tip.php',
'ajax_message': 'Loading... please wait.',
'position':1,
'sticky':false
}
},
ToolTipClass:'ToolTips', // tooltip display class
toolTipPosition:-1, // -1 top; 1: bottom - set this as a default position value if none is set on the element
sticky:false, // remove tooltip if closed
fromTop: 0, // distance from mouse or object
fromLeft: -55, // distance from left
duration: 300, // fade effect transition duration
fadeDistance: 20 // the distance the tooltip starts the morph
});
}
Script demo is here,
http://jsfiddle.net/kyathi/mHEjV/.
Idea behind is while mouseenter every tippable class will show an ajax tooltip. But script fails to call ajax script at first time when hover the div and it will involk thereafter.
Any idea to fix the error?
Thanks
I commet out the toolTipPosition:-1 And not its displaying the tooltip. But the alignment is out.
http://jsfiddle.net/mHEjV/1/
the $$ function return always an array.. you are adding the events on an array and not on the elements of the array. You need to do a loop or use the each() method:
$$('div.tippable').each(function(div){
div.addEvents({
mouseenter:function(){
...
http://jsfiddle.net/mHEjV/2/
And it wont work in jsfiddle since the ajax call uses a different domain.
http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests
Good Luck

Randomly generate which sprite to move via spirtely?

OK, so I'm looking for an interesting effect, here. I have 10 different <div> elements. I would like one of them to be chosen at random every 5 seconds, and then have that <div> that has been selected move to the left (if it's the <div>'s 1-5) first, and then back right to where it started (if it was <div>'s 6-10 it would move right first, and then back left to where it began). I'm looking to accomplish this movement via the jQuery plugin spritely.
Let's start with the rng, which I already have taken care of:
setInterval(function() {
var rand = Math.floor(Math.random()*9+1);
if (rand === 1) {
move <div> #1 left and then right
}
else if (rand === 2) {
move <div> #2 left and then right
}
Then, rinse and repeat for <div>'s 3-10. This is obviously not by any means an elegant solution, but it gets the job done, as far as I'm concerned.
Now, the next job we must get done is the actual moving itself. Since we have only 5 seconds between the time a <div> is picked and another one is picked, I was thinking of making the movement left and right each last for 2 seconds. Then, there is a second left open for a break.
In order to implement this, I tried the following:
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "left"});
});
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "right"});
});
This would be inserted between the if (rand ===1) { } part of the "rng" code, so to speak.
That code makes use both of spritely, and the jQuery Timers plugin. Now, for some reason, I'm not getting my desired effect with this. Instead of <div>'s 1-5 moving left and then right to where they came from (and the opposite for <div>'s 6-10) I'm getting this odd, spazzing effect.
You can see it here.
Any ideas as to why this is happening?
Thanks!

Categories