Question

我刚刚开始做一些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);
    });
});

Answer 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的善良。 =）

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

1 个答案: