Currently I am working on an plugin for jQuery. In some jQuery functions you can pass an duration (e.g. '500ms', '1s', 'fast') parameter in.
I suppose there is a function within jQuery which pares that value and returns a value in ms? (so 1s would return 1000 or something).
Which method would this be, and is it possible to use this in my own plugin? So I can fire an callback after '1s' or 'fast' like some other methods as animate currently does.
You can always have a look at the source code. There you can see that .animate() calls a method jQuery.speed which uses jQuery.fx.speeds:
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
jQuery.speed seems to be useful in this regard, though I don't see any code which converts '1s' into 1000. Are you sure jQuery is doing this?
let's take a look at jquery source :
speeds: {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
So, how about slow fadeOut ? let's take a peek into the source again. It looks like 'fadeOut' is just a shortcut for custom animation. There is a nice generic block of logic that jQuery re-uses for that purpose. There's no point in pasting the whole source in here :) you can easily go to your project a see for your self.
You could implement this very easily on your own
function ms(s){
return parseInt(s) *1000;
}
alert(ms("20s")); #=> 20000
Aside from that, using 1000 compared to '1s' is hardly an inconvenience. The integer has additional benefits as it's easier to modify in a programmatic way using simple arithmetic.
Related
First of all, what does the { } do, why is it needed and what exactly is it called when it does this? Why can't I just use "top:+=10px" for my css, why do I need { }.
second, why do I need only one comma on each side of +=10px, what do the commas do and why can't I use 'top:+=10px instead of top:'+=10px'?
I don't know what this is called so I don't know how to properly look up the terminology of what I am asking.
('div').animate({top:'+=10px'},500);
The { } denotes an Object in JavaScript. By setting {top: '+=10px'}, 500 you are setting a property top and telling jQuery you want it to animate X amount from the top over the course of 500 milliseconds.
You can find documentation on this here
You need to remember that you are writing jQuery, which is JavaScript, and therefore the syntax will be different compared with the CSS you are used to writing.
Consider the following jQuery:
$({x: startX}).animate({x: endX}, {
duration: 100,
step: function(now, fx) {
xVar = now;
}
});
Is it possible to stop this animation before calling it again? I've tried
$({x: startX}).stop().animate(...)
but that doesn't seem right, and doesn't seem like it's working either. Any thoughts?
Thanks!
From the jQuery documentation, you can't use .animate() on a jQuery object that you just passed an object to. A relevant quote from this page:
Working With Plain Objects
At present, the only operations supported on plain JavaScript objects wrapped
in jQuery are: .data(),.prop(),.on(), .off(), .trigger() and .triggerHandler().
The use of .data() (or any method requiring .data()) on a plain object will
result in a new property on the object called jQuery{randomNumber}
(eg. jQuery123456789).
So, my conclusion is that this construct isn't supported:
$({x: startX}).animate(...)
I am using this function for easiness, as I am going to use fadeTo a lot:
function fade_to(div, speed, opacity, after_fade) {
$(div).fadeTo(speed, opacity, after_fade);
}
Then I am calling the same function for after_fade parameter:
fade_to('#div', 3000, 1, function() { fade_to('#another_div', 3000, 1)});
Is that a bad thing to do? Will I have speed/smoothness issues?
Is it better to just use jQuery's default fadeTo function?
Thanks!
There is no gain to be made with your method. Plus you are using the jQuery fadeTo function. There is nothing wrong with what you did, just no gain. You could save work with such a technique if for example you had less arguments in your custom function:
function fade_to(div, after_fade) {
$(div).fadeTo(3000, 1, after_fade);
}
fade_to('#div', function(){ fade_to('#another_div', $.noop); });
This would actually save you work by preventing you from having to enter speed and opacity arguments. You could also curry it like this
function Fade_to(speed, opacity){
return function(div, callback){
$(div).fadeTo(speed, opacity, callback);
}
}
Then you could make argument saving functions on the fly like
var fade_to_foo = Fade_to(3000, 1);
fade_to_foo('#div', function(){ fade_to_foo('#another_div'); });
Otherwise there is no reason not to just write it the jQuery way
$('#div').fadeTo(3000, 1, function(){ $('#another_div').fadeTo(3000, 1); });
It's a bad practice because you cannot use any more modifiers without applying them to every instance your function is called. Since you can chain modifiers in jQuery, and most would agree that doing so is a useful feature, you are disabling that useful feature for yourself or anyone else working on this code body.
If you want to add any additional animations or stylings, you'll have to select the object again through regular jQuery this time. Extra work, extra calls, no real benefit.
this practice is against the goal of using jQuery as a chainable, short-syntax library. however if this specific functionality is useful for a project, can be effective.
Mike,
I don't know that this is necessarily a 'bad' thing to do, as it might offer easier usability or something (not sure, given that I don't know the context of your example) that using the standard function given in an API wouldn't otherwise.
Actually, having a function call itself is using an idea in CS called 'recursion' which can be useful for traversing trees (you can google both recursion, and trees to get a better idea of what I'm referring to here), or performing some kind of mathematical operation (i.e. Euclidean algorithm).
I would say, that if you're doing this, it's a great idea to ask "why". You won't be gaining anything in terms of speed since you're passing the parameters an extra time, and your function isn't accomplishing anything extra compared to the API's implementation (at least that I'm seeing). If you were to make a habit out of this...let's say with a more
computationally taxing function...you might notice a slowdown.
I'm hoping to not just answer your question here, but to give you some further insight as to why it's generally a bad idea to do this. I agree with dunsmoreb, and Thomasdotnet as well. Good points!
-sf
Your approach is convenient. I doubt it will slow down the fade effect. There is nothing wrong with this approach in my mind. If you decided that your fade effect should pulse or blink before fading you would only need to modify your function to pulse/blink and then fade all calls to fade would then run the new routine. In this case it makes sense as it reduces code and improves maintainability. Ericosg does make a valid point though why not reduce the paramaters if they are going to be the same.
It is better to just use jQuery's default fadeTo function. just this.
I'm a jquery novice trying to write my first app here and one thing I've been trying to figure out is how to use the .delay() method if what I want to delay is the method of an object.
So for example, I have something like this:
dice = new Dice("#die1", "#die2");
dice.roll();
But I want there to be a delay before the roll() function is actually invoked. How would I do that?
I figured using jquery would be easier than pure javascript because I know that using setTimout() is tricky to use with your own methods.
There is nothing tricky or dangerous about setTimeout and it's likely the most appropriate approach here. It's specifically designed to execute functions after a given time has expired.
For example here's a 1 second delay
dice = new Dice("#die1", "#die2");
setTimeout(function() { dice.roll(); }, 1000);
I want to use method chaining in moo tools 1.2.
My requirements are as below.
When page load complete.
My one div element say "my_div" is set to hidden visibility.
After half second its opacity set to 0.4
Then again after half second its opacity set to 0.7
Then again after half second its opacity set to 1.
So how could i do this with chaining in moo tools 1.2.
And one more this.
I could i pass the parameter when i call delay method. For example
function demo(arg1, arg2)
{
// Demo code will be here
}
So how could i call this function with delay of one second and also with passing this two arguments?
not sure why you need the gaps when you can do something like this (try it and see if it works better):
(function() {
$("foo").set("tween", {duration: 1500}).setOpacity(0).fade(1);
}).delay(500);
but if you need to do it as per your specs without a tween, then do:
(function() {
$("foo").setOpacity(.4).setStyle("visibility", "visible");
}).delay(500);
(function() {
$("foo").setOpacity(.7);
}).delay(1000);
(function(message) {
$("foo").setOpacity(1).set("html", message);
}).delay(1500, this, "hello");
no need for chaining as you are running the changes at preset times anyway, they don't need to wait on each other. but the chaining class is awesome for animations as suggested, http://mootools.net/docs/more/Class/Chain.Wait
as for params, .delay supports: (ms, bind [this etc], arguments) (as per last cycle example that changes the div's html)
How about this?
setTimeout
(
demo // function to call
, 500 // change this according to your needs
, p1 // this goes to arg1
, p2 // this goes to arg2
);
p.s. I don't know for IE and Safari, but it works on Firefox, Chrome, and Opera.
Have a look at the Chain.Wait extra: http://mootools.net/docs/more/Class/Chain.Wait
You'll need to go to http://mootools.net/more to get a custom MooTools build that includes the wait extensions.