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

Posted

技术标签:

【中文标题】有没有办法在 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 - 谢谢 =)

以上是关于有没有办法在 jquery animate 中使用 scss mixin?的主要内容,如果未能解决你的问题,请参考以下文章

jquery .animate() 没有动画

jQuery animate() 不使用颜色

jQuery .animate() 在 IE8 中没有做任何事情

.animate() - 旧 jquery 版本(Drupal)冲突的队列模拟

仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误

jquery animate方法动画效果没有