有没有办法在 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() 在 IE8 中没有做任何事情
.animate() - 旧 jquery 版本(Drupal)冲突的队列模拟