- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
以下函数采用 options
参数,并根据 startValue
将元素动画到特定的数量
像素:
options: {
property: 'right',
startValue: '-250px',
amount: '250px'
},
function (options) {
const $el = $(this.el)
$el.click(() => {
const startValue = $el.parent().css(slide.property)
const calcValue = parseInt(startValue, 10) + parseInt(slide.amount, 10)
if (startValue === slide.startValue) {
$el.parent().animate({ [slide.property]: calcValue }, 200)
} else {
$el.parent().animate({ [slide.property]: slide.startValue }, 200)
}
})
}
但我想知道,是否可以在不必向函数提供 startValue
的情况下完成相同的任务? (例如,如果 right
的初始值为 0
,则在您第二次单击该元素时将其恢复为 0
。)
最佳答案
您可以利用 .animate()
在调用时添加内联样式属性这一事实。因此,如果您想将元素恢复为 CSS 中指定的 right
值,可以调用 .removeAttr("style")
。要获得动画效果,您必须在 CSS 中包含一个过渡属性。
例如,查看这个工作 fiddle :https://jsfiddle.net/hr0cxax2/1/
$("#slideButton").on("click", function() {
$("div").animate({right:"-=50px"}, 200);
});
$("#restoreButton").on("click", function() {
$("div").removeAttr("style");
});
<小时/>
div {
height: 50px;
width: 50px;
top: 20px;
right: 300px;
background-color: red;
position: fixed;
-webkit-transition: right 0.2s;
-moz-transition: right 0.2s;
transition: right 0.2s;
}
否则,据我所知,您需要在调用 .animate()
之前获取并保存原始 right
值。
关于javascript - 是否可以将元素恢复到其先前的位置而不将位置作为参数传递?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36637652/
我的应用将 SceneKit 内容的“页面”与图像和文本交替。当我从图像页面前进到新的 SceneKit 页面时,前一个 SceneKit 页面中的内容会短暂显示,然后被新内容替换。时髦。 我只使用一
我正在尝试处理(在 C# 中)包含一些数字数据的大型数据文件。给定一个整数数组,如何对其进行拆分/分组,以便如果下一个 n(两个或更多)是负数,则前一个 n 元素被分组。例如,在下面的数组中,应该使用
刚接触promises,研究过。所以我的代码和我的理解: sql.connect(config).then(function(connection) { return connection.req
目前我在 if (roobaf) block 中有一些代码,这取决于 foo 和 bar 是否为假。我可以在 block 内再次检查这些条件,但感觉像是不必要的代码重复。 if (foo) {
我是一名优秀的程序员,十分优秀!