0

假设我有 2 个框，其中一个使用此类位于屏幕的左上角：

.position1 {
    position: fixed;
    top: 100px;
    left: 100px;
}

另一个使用此类位于右下角：

.position2 {
    position: fixed;
    bottom: 100px;
    right: 100px;
}

有没有一种简单的方法，使用 jQuery 或其他方式：

  • 将左上角的框滑动（动画）到右下角的位置
  • 将右下角的框滑动（动画）到左上角的位置

我可以通过简单的操作轻松地实现这一点，而无需使用动画......但我需要动画本身来模仿盒子彼此“交换位置”，而不仅仅是瞬间交换边。.addClass().removeClass()

我查看了 jQuery animate 功能，但除非我弄错了，否则它不会显示您可以应用预定义类（并删除预定义类）作为 animate 函数的选项。

4

2 回答 2

2

看这里：jQuery.animate() 仅带有 css 类，没有明确的样式或这里：http ://api.jqueryui.com/switchClass/

于 2013-08-12T19:03:22.903 回答
1

您也可以为此使用过渡。您在使用原始 CSS 时可能遇到的一个问题是您无法在像素值和初始（无属性）值之间转换。

这是一个简单转换的简单示例（仅限 webkit），我相信它可以满足您的要求：

CSS

.changer {
    -webkit-transition: all 2s ease;
}

#one { background-color: blue; }
#two { background-color: red; }

.position1 {
    position: fixed;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;    
}

.position2 {
    position: fixed;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 100px;    
}

HTML

<div id="one" class="changer position1"></div>
<div id="two" class="changer position2"></div>

Javascript （在卸载时运行超时只是为了样本的一点延迟）

window.setTimeout(function() {
    var one = document.getElementById('one');
    var two = document.getElementById('two');  

    one.classList.remove('position1');
    one.classList.add('position2');
    two.classList.remove('position2');
    two.classList.add('position1');
}, 500);

工作小提琴

于 2013-08-12T19:32:26.480 回答