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

【问题标题】：Is there a way to use scss mixin in jquery animate?有没有办法在 jquery animate 中使用 scss mixin？
【发布时间】：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！非常感谢:)！

标签： javascript jquery html css sass

【解决方案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 - 谢谢 =)