Question

假设我有两个盒子，一个位于屏幕的左上角，使用此类：

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

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

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

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

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

我可以通过简单地执行.addClass()和.removeClass()轻松实现而不使用动画 ...但我需要动画本身来模仿“切换位置”框相互而不是瞬间交换边。

我查看了jQuery动画功能，但除非我错了，否则它不会出现，你可以应用预定义的类（并删除一个预定义的类）作为animate函数的一个选项

Answer 1

点击此处：jQuery.animate() with css class only, without explicit styles或此处：http://api.jqueryui.com/switchClass/

Answer 2

您也可以使用过渡。您可能遇到原始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);

<强> Working Fiddle

动画addClass + removeClass过渡？

2 个答案: