CSS在jQuery类alter上转换div

Question

我有一个盒子想在窗户的角落里移动。为此，我在点击时使用了一个jQueryattr函数，它通过更改类将框带到所述角。

这里的问题是，我无法让div在点击时在位置之间转换。我的第一个猜测是，添加的类具有用top、bottom、left、right标记编写的坐标，而原始框的css不包含这样的参数。问题是，如果我添加params，转换肯定有效，但盒子不会放在我希望的地方。玩钢笔，你就会明白我在说什么。

以下是元素的css：

#menu {
  position: absolute;
  background: @c5;
  width: 160px;
  height: 160px;
  -webkit-transition: all 2s; // Chrome
  -moz-transition: all 2s; // Mozilla
  -o-transition: all 2s; // Opera
  transition: all 2s;
  overflow: hidden;
  border-radius: 50%;
}
.topleft {
  top: 0 ;
  left: 0;
}
.topright {
  top: 0;
  right: 0;
}
.bottomleft {
  bottom: 0 @I;
  left: 0 @I;
}
.bottomright {
  bottom: 0 @I;
  right: 0 @I;
}
.link {
  width: 80px;
  height: 80px;
  float: left;
}

jQuery是一个简单的点击添加alterthis或that类的

$("#m1").click(function(){
     menu.attr('class', 'bottomright');
   });  //this times four

您查看更多详细信息笔

我已经尝试了5个小时不同的东西，现在我没有主意了。因此，如果有人对如何使其发挥作用有更好的线索，我们将不胜感激。

ps。谷歌没有帮助

Answer 1

诀窍是在相同的值上转换-不能将left转换为right，但可以将left转换为left。那么，唯一与您对抗的是LESS对Calc()调用的编译。

这里只包括了有趣的部分，其余的都在代码笔上。

http://codepen.io/anon/pen/OMWeqY

@menu_w: 160px;
@menu_h: 160px;
#menu {
  position: absolute;
  top: 0;
  left: 0;
  width: @menu_w;
  height: @menu_h;
  transition: all 2s;
}
#menu.topleft {
  top: 0;
  left: 0;
}
#menu.topright {
  top: 0;
  left: ~"Calc(100% - " @menu_w ~")";
}
#menu.bottomleft {
  top: ~"Calc(100% - " @menu_h ~")";
  left: 0;
}
#menu.bottomright {
  top: ~"Calc(100% - " @menu_h ~")";
  left: ~"Calc(100% - " @menu_w ~")";
}

不要介意代码笔上随机出现的/**/，这是我为Calc()没有按预期工作而抓狂时留下的痕迹（以前从未真正处理过LESS）。真的不知道为什么LESS会把Calc(100% - 160px)解释成它所解释的样子，但我不是LESS的设计者。

不知道为什么其他两条评论是通过空白和大量的jQ丑闻来实现的。有些东西让人痴迷。我也建议将其与jQ脱钩，但我不知道页面上是否有其他人使用它，而且一旦开始，jQ就相当锁定。