0

I'm working with the Raphael JS library and trying to create a hoverIn and hoverOut function that can be applied to any target.

I think the problem is a function of lacking pass-by-reference (I'm very new to JavaScript).

After I create a set of paths and add attributes to view them:

Services = rsr.set();

Services.push(
    rsr.path("M698.5,98.617V96.09c0.289,0.256,0.636,0.484,1.04,0.689    c0.403,0.203,0.829,0.375,1.276,0.516c0.445,0.143,0.896,0.25,1.347,0.326c0.45,0.078,0.867,0.113,1.251,0.113    c1.318,0,2.305-0.242,2.955-0.732s0.977-1.193,0.977-2.111c0-0.496-0.106-0.922-0.325-1.291c-0.217-0.365-0.517-0.699-0.898-1.002    c-0.383-0.301-0.836-0.592-1.359-0.865c-0.521-0.275-1.088-0.568-1.689-0.875c-0.64-0.32-1.235-0.648-1.788-0.982    c-0.555-0.33-1.033-0.697-1.442-1.098c-0.408-0.398-0.729-0.854-0.964-1.359c-0.235-0.504-0.351-1.1-0.351-1.781    c0-0.834,0.184-1.561,0.549-2.178c0.366-0.615,0.846-1.125,1.442-1.525c0.596-0.398,1.273-0.697,2.036-0.893    c0.761-0.197,1.537-0.295,2.328-0.295c1.804,0,3.119,0.219,3.943,0.65v2.412c-1.082-0.748-2.468-1.123-4.161-1.123    c-0.468,0-0.938,0.051-1.404,0.148c-0.469,0.098-0.885,0.258-1.251,0.479c-0.367,0.223-0.665,0.504-0.894,0.854    c-0.23,0.35-0.346,0.775-0.346,1.275c0,0.471,0.087,0.873,0.262,1.215c0.174,0.342,0.433,0.65,0.772,0.932    c0.341,0.281,0.754,0.555,1.244,0.818c0.488,0.264,1.052,0.555,1.69,0.865c0.653,0.324,1.275,0.666,1.862,1.021    c0.587,0.357,1.103,0.754,1.546,1.188c0.441,0.432,0.793,0.916,1.054,1.443c0.258,0.525,0.389,1.133,0.389,1.811    c0,0.904-0.178,1.666-0.53,2.293c-0.353,0.625-0.828,1.137-1.43,1.523c-0.599,0.393-1.291,0.676-2.074,0.852    s-1.608,0.264-2.477,0.264c-0.29,0-0.646-0.025-1.071-0.072c-0.427-0.049-0.859-0.117-1.303-0.203    c-0.443-0.09-0.862-0.201-1.258-0.332C699.055,98.926,698.737,98.777,698.5,98.617z"),
    rsr.path("M722.425,93.344h-9.229c0.033,1.457,0.425,2.58,1.175,3.371    c0.747,0.791,1.776,1.188,3.089,1.188c1.473,0,2.825-0.484,4.061-1.457v1.969c-1.148,0.832-2.669,1.25-4.558,1.25    c-1.847,0-3.299-0.596-4.354-1.781c-1.058-1.188-1.583-2.855-1.583-5.01c0-2.035,0.575-3.691,1.729-4.975    c1.152-1.279,2.584-1.922,4.295-1.922c1.712,0,3.035,0.555,3.972,1.66s1.404,2.643,1.404,4.607L722.425,93.344L722.425,93.344z     M720.279,91.57c-0.008-1.211-0.299-2.15-0.875-2.822c-0.574-0.672-1.372-1.01-2.394-1.01c-0.987,0-1.825,0.354-2.515,1.061    c-0.69,0.707-1.114,1.629-1.277,2.771H720.279L720.279,91.57z"))
    ).attr({
    fill: '#010101',
    stroke: '#000000',
    'stroke-width': 0
});

I add hover in and hover out events by appending the following:

.hover(
    function(){Services.animate({"fill": "#128A8F"}, 500), 
    function(){Services.animate({"fill": "#010101"}, 500));

And this works fine.

However, I'm applying this effect to many paths in my script and apply it through hover boxes, so I need to be able to make the hover function more malleable.

I attempted the below to generalise the hover target to a passed object, but it doesn't work probably because JavaScript is pass by value:

function menuHoverIn(target){
        target.animate({
            "fill": "#128A8F"
        }, 500);
    };

function menuHoverOut(target){
        target.animate({
            "fill": "#010101"
        }, 500)
    };

So how do I make the above functions work as I'd expect them to in JavaScript? I merely want the passed object to be animated.

Thank you!

4

2 に答える 2

1

あなたはこれを行うことができます ：

var menuHoverIn = function(target) {
    target.animate({
        "fill": "#128A8F"
    }, 500);
};

var menuHoverOut = function(target) {
    target.animate({
        "fill": "#010101"
    }, 500)
};

something.hover( menuHoverIn, menuHoverOut );

オブジェクトの "and" 関数に関する 2 つの優れた記事を次に示し ます。

別のオブジェクトをアニメートするには:

// Function.prototype.bind polyfill
if ( !Function.prototype.bind ) {

  Function.prototype.bind = function( obj ) {
    if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');

    var slice = [].slice,
        args = slice.call(arguments, 1), 
        self = this, 
        nop = function () {}, 
        bound = function () {
          return self.apply( this instanceof nop ? this : ( obj || {} ), 
                              args.concat( slice.call(arguments) ) );    
        };

    bound.prototype = this.prototype;

    return bound;
  };
}

var menuHoverIn = function(target) {
    this.animate({
        "fill": "#128A8F"
    }, 500);
};

var menuHoverOut = function(target) {
    this.animate({
        "fill": "#010101"
    }, 500)
};

something.hover( menuHoverIn.bind(YourElement), menuHoverOut.bind(YourElement) );

調整が必要かもしれませんが、私は同様のコードを使用しています。要素をアニメーション化する要素に置き換えることを忘れないでください。

于 2013-07-01T20:19:24.327 に答える