How to pass object from jquery to javascript

Question

I wanna pass an object from jquery using a selector to a javascript function like below.

flash($("#something span"), "#fff", 250);

but it does not seem to be working.

and I am not sure what to put in the javascript function. What I make now is:

function flash(obj,color1,color2,duration) {
    obj.animate({backgroundColor:color1},duration);
    setTimeout(function(){this.animate({backgroundColor:color2},duration);},duration);
}

or is there another way instead of passing an object? for example, in jquery: $("this").flash("#f79999", "#eee", 250);

but then how to define the javascript function?

jQuery is JavaScript

Pointy
– Pointy

2012-10-23 23:30:16 +00:00
Commented Oct 23, 2012 at 23:30 — Pointy
– Pointy, Commented Oct 23, 2012 at 23:30

earl3s · Accepted Answer · 2012-10-23 23:30:36Z

1

You have a simple syntax error.

ojb.animate({backgroundColor:color},duration);

Should be

obj.animate({backgroundColor:color},duration);

answered Oct 23, 2012 at 23:30

earl3s

2,3731 gold badge23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

earl3s Over a year ago

Also, note that JQuery is a framework for javascript, so it is javascript.

Jonathan Lonowski · Accepted Answer · 2012-10-24 00:13:55Z

0

You'll have to include the jQuery.Color plugin to animate properties like background-color.

From "Animation Properties and Values:"

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). [...]

is there another way instead of passing an object? for example, in jquery: $("this").flash("#fff",250);

jQuery's Plugins/Authoring should help with this. But, you could define it as:

jQuery.fn.flash = function (color, duration) {
    return this.animate({ backgroundColor: color }, duration);
};

$('#something span').flash('#fff', 250);

edited Oct 24, 2012 at 0:13

answered Oct 23, 2012 at 23:51

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

7 Comments

Kyle Xie Over a year ago

yes I did, but I don't know how to define function in javascript.

Jonathan Lonowski Over a year ago

@KyleXie The definition in your question should work fine with jQuery.Color included. For the $(this).flash(...) variant, see my edit.

Kyle Xie Over a year ago

Thanks, it works. But there comes another issue. The function "setTimeout()" does not work inside the flash(). My flash method is to let the background to the a color, say red, and then turn back to the original color. flash() { this.animate({backgroundColor:to},duration); setTimeout(function(){this.animate({backgroundColor:from},250);},250); } but the now only the first line runs while the second line does not.

Jonathan Lonowski Over a year ago

@KyleXie Keep using obj rather than this inside the setTimeout function. You can also use .delay() to chain animations: jsfiddle.net/UaY4j

Jonathan Lonowski Over a year ago

@KyleXie It's an issue of context. Every function has its own value for this and you have 2 functions -- flash itself and the anonymous function passed to setTimeout. To specify the value of this for the anonymous function, you can to use bind or $.proxy.

|

Beetroot-Beetroot · Accepted Answer · 2012-10-24 00:27:24Z

0

With the jQuery.Color plugin installed in the page (ack. @Jonathan Lonowski) ...

You can avoid passing an object by using javascript's .call() or .apply().

Here's an example :

$(function() {
    function flash(color, duration) {
        this.animate({backgroundColor:color}, duration);
    }
    $("#something span").on('click', function() {
        flash.call($(this), "#fff", 250);
    });
    $("#something_else span").on('click', function() {
        flash.apply($(this), ["#fff", 250]);
    });
});

.call() and .apply() aren't really necessary here; regular function calls would suffice.

.call() and .apply() are normally used in cases where you need to call a method of one object but give it the context of another object. By doing so, the method is made to operate on a different this.

answered Oct 24, 2012 at 0:27

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

2 Comments

Kyle Xie Over a year ago

Thank you both. But the setTimeout() method does not work inside the flash method, have any idea?

Beetroot-Beetroot Over a year ago

There was no setTimeout, you have edited it in! The simplest solution is not to use setTimeout but to use jQuery's .delay(), which is a chainable method that can be inserted into an animation sequence, obj.animate(...).delay(...).animate(...);.

Collectives™ on Stack Overflow

How to pass object from jquery to javascript

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related