how to make a working variable for object key in jquery to avoid extra codes

Question

I'm using TweenMax script to add styles to a div on scrolling. I want to have different styles on different page resolutions. So, I added an if condition as a solution. How can I use a variable to avoid adding extra codes inside the if condition?! I added $direction and only direction as a variable, but, it seems that it doesn't work.

if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
    var $direction = 'left';
} else {
    var $direction = 'top';
}
$(".softwares").children(".row").each(function(a) {
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, {
            $direction: 45 * a,
            opacity: 1,
            ease: Back.easeOut
         })
     })
});

I looked upon lot's of questions in stackoverflow, and I used [] to come to a solution, but I could not make it work.

I don't want the code to be like: (the extra code which I want to avoid)

$(".softwares").children(".row").each(function(a) {
     if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
         // opacity: 1, ease: Back.easeOut are extra codes in both conditions
         var options = {left: 45 * a, opacity: 1, ease: Back.easeOut};
     } else {
         var options = {top: 45 * a, opacity: 1, ease: Back.easeOut};
     }
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, options) // use options object here
     })
});

what are the extra codes ? – Md. Arafat Al Mahmud Mar 28 '15 at 06:25 — Md. Arafat Al Mahmud, Mar 28 '15 at 06:25
the extra code which I want to avoid is added – Afshin Mar 28 '15 at 07:21 — Afshin, Mar 28 '15 at 07:21

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

You could do this:

$(".softwares").children(".row").each(function(a) {
     if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
         // set options object directly in your condition
         var options = {left: 45 * a, opacity: 1, ease: Back.easeOut};
     } else {
         var options = {top: 45 * a, opacity: 1, ease: Back.easeOut};
     }
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, options) // use options object here
     })
});

But this makes you write a few extra codes.

Otherwise, you could check out this question for more information on how having dynamic keys.

edited May 23 '17 at 12:12

Community

1
1

answered Mar 28 '15 at 06:31

D4V1D

5,805
3
30
65

Thanks, it's a good solution. So, +1 . But, let's see if there's another solution better than this – Afshin Mar 28 '15 at 06:35
Yep, have you had a look to the link provided? :) – D4V1D Mar 28 '15 at 06:35
1

I somehow corrected your answer to avoid "Uncaught ReferenceError: a is not defined" – Afshin Mar 28 '15 at 07:50

how to make a working variable for object key in jquery to avoid extra codes

1 Answers1