有没有办法在 jquery animate 中使用 scss mixin？

Posted 2023-03-07

【中文标题】有没有办法在 jquery animate 中使用 scss mixin？

【英文标题】：Is there a way to use scss mixin in jquery animate?

【发布时间】：2016-11-09 23:58:45

【问题描述】：

我刚开始做一些 jquery 和 sass，所以我有点困惑。 我的问题是我可以像这样使用 mixin：

@mixin borderradius 
  border-top-left-radius     : 100;
  border-top-right-radius    : 100;
  border-bottom-right-radius : 100;
  border-bottom-left-radius  : 100;

在 jquery 代码中是这样的：

$(document).ready(function() 
    $('#divic,#divonja').mouseenter(function() 
        $(this).animate(
            borderTopLeftRadius: 100,
            borderTopRightRadius: 100,
            borderBottomLeftRadius: 100,
            borderBottomRightRadius: 100
        , 200);
    );
    $('#divic,#divonja').mouseleave(function() 
        $(this).animate(
            borderTopLeftRadius: 0,
            borderTopRightRadius: 0,
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0
        , 200);
    );
    $('#divic,#divonja').click(function() 
        $(this).toggle(1000);
    );
);

我可以写@include borderradius之类的东西，而不是写所有这些边界半径4次？ 像这样的：

$(document).ready(function() 
    $('#divic,#divonja').mouseenter(function() 
        $(this).animate(
           @include borderradius
        , 200);
    );
    $('#divic,#divonja').mouseleave(function() 
        $(this).animate(
            @include borderradius
        , 200);
    );
    $('#divic,#divonja').click(function() 
        $(this).toggle(1000);
    );
);

【问题讨论】：

如果四个值都相同，为什么不使用.animate( borderRadius: 0 )？

你可以！这叫变量！只需引用动画配置对象并将它们放在您通常编写对象的位置...

我尝试使用borderRadius：0，但是在mouseenter上它的动画效果非常好，但在mouseleave上它的速度非常快，正如我所说我只是这一切的初学者：D！非常感谢:)！

【参考方案1】：

好消息！只需使用function，它会返回您想要的object。

function borderRadius(radius) 
  return 
    borderTopLeftRadius: radius,
    borderTopRightRadius: radius,
    borderBottomLeftRadius: radius,
    borderBottomRightRadius: radius
  ;


$(document).ready(function() 
    $('#divic,#divonja').mouseenter(function() 
        $(this).animate(borderRadius(100), 200);
    );
    $('#divic,#divonja').mouseleave(function() 
        $(this).animate(borderRadius(0), 200);
    );
    $('#divic,#divonja').click(function() 
        $(this).toggle(1000);
    );
);

#divonja   background: #e1f0aa; width: 200px; height: 200px; border-radius: 20px; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divonja"></div>

嗯，现在这就是一些 JS 的优点。 =)

【讨论】：

非常感谢：D！我刚开始做一些 jquery 和 sass，所以这对我来说是全新的 :)！

没问题。如果您觉得您的问题已得到解答，请点赞并将此答案标记为已接受。否则，请发表评论。

我确实将其标记为已接受，不幸的是我无法投票，因为我是新手，因此没有 15 个代表。

@i1zivkovic - 谢谢 =)