CODEWITHSUNDEEP
javascriptjqueryobject
Caio Kawasaki
Caio Kawasaki

Reputation: 2950

Function inside object

Well, i don't know if the return in the transform function can work, but, someone know if there is a way where i can get something similar to this? Put a function inside an object...

var t = $(this).scrollTop();
var h = $(window).height();

function transform(val){
    return "-webkit-transform": "translateY(" + val + "%)",
    "-ms-transform": "translateY(" + val + "%)",
    "transform": "translateY(" + val + "%)";
}

$("#header").css({
    opacity: 50 * (t/h),
    tranform(50 * (t/h))
});

Upvotes: 1

Views: 79

Answers (2)

Can Guney Aksakalli
Can Guney Aksakalli

Reputation: 1330

You can use JQuery extend function for this

$("#header").css($.extend({
    opacity: 50 * (t/h)
  },
  tranform(50 * (t/h))
));

Upvotes: 1

ssube
ssube

Reputation: 48337

You could use a CSS extension language (like LESS or SCSS) to handle variables, then simply process and use some simple stylesheet.

If you want to stick with JS, I would suggest returning a hash from transform and extending that later, like:

function transform(val) {
  return {
    "-webkit-transform": "translateY(" + val + "%)",
    "-ms-transform": "translateY(" + val + "%)",
    "transform": "translateY(" + val + "%)"
  }
}

function transformWithOpacity(val) {
  var base = transform(val);
  base["opacity"] = val;
  return base;
}

var num = 50 * (t/h);
$("#header").css(transformWithOpacity(num));

Upvotes: 1

Related Questions