Question

我正在使用TweenMax脚本在滚动时为div添加样式。我希望在不同的页面分辨率上有不同的样式。所以，我添加了一个if条件作为解决方案。如何使用变量来避免在if条件中添加额外的代码？！我添加了$direction并且只添加了direction作为变量，但似乎它不起作用。

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
         })
     })
});

我在stackoverflow中查看了很多问题，并使用[]来解决问题，但我无法使其正常工作。

我不希望代码如下:(我想避免的额外代码）

$(".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
     })
});

Answer 1

你可以这样做：

$(".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
     })
});

但这会让你写一些额外的代码。

否则，您可以查看this question以获取有关如何使用动态密钥的更多信息。

如何在jquery中为对象键创建一个工作变量以避免额外的代码

1 个答案: