Question

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

这里的问题是我无法让div在点击之间转换。我的第一个猜测是添加的类具有用顶部，底部，左，右标签写的坐标，而原始框的css不包含这样的参数。事情是，如果我添加参数，转换确实有效，但盒子不会去我想去的地方。用笔来玩，你会看到我在说什么。

这是元素的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是一个简单的，点击添加改变这个或那个类

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

您需要了解更多详情 THE PEN

尝试不同的事情已经有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 ~")";
}

不要介意codepen上的随机/**/，这是因为当我因Calc()而无法按预期工作（以前从未真正处理过LESS）时的遗留问题。真的不确定为什么LESS会将Calc(100% - 160px)解释为它所解释的内容，但是，我不是LESS的设计师。

不确定为什么其他两条评论是通过保证金和大量的jQ捣乱来实现的。 jQ shoehorning痴迷的东西。我建议你也可以从jQ中删除它，但是我不知道页面上是否还有其他东西使用它，并且一旦你开始，jQ就会非常锁定。

CSS在jQuery类上转换div改变

1 个答案: