在 jQuery 动画 div 的结束位置更改 element.style答案

【问题标题】：changing element.style on the finishing position of a jQuery animated div在 jQuery 动画 div 的结束位置更改 element.style
【发布时间】：2013-01-11 00:45:54
【问题描述】：

我正在使用相册 jQuery 插件（超大）。它包括一个缩略图托盘，只需按一下按钮，它就会从屏幕底部向上滑动，从而在 div 属性和 firebug css 'element.style 中创建以下 HTML。属性：

style="display: block; bottom: -150px;"

当调用者点击时：

style="display: block; bottom: 0px;"

我试图在页面底部放置一个页脚 div，所以想将完成位置移动到“底部：0px”。我已经看到可以将额外的 element.style 添加到本地 CSS 但没有“之前”和“之后”类型的选择我不明白这是否可以帮助我。此外，我在 JS 文件中找不到该功能，据我所知，无论如何都无法访问它。我需要将这些更改为：

style="display: block; bottom: -150px;"

当调用者点击时：

style="display: block; bottom: 42px;"

欢迎任何建议。谢谢

【问题讨论】：

标签： javascript jquery css styles

【解决方案1】：

$('#clickedElement').on('click', function() {    
    $('#element').css('bottom', '42px')
});

如果我没有误会你？

【讨论】：

【解决方案2】：

可能你找不到的函数是 jquery .css() 函数，你可以阅读它是如何工作的 here。

另外，如果你想为一些潜水制作动画，你可以使用 jquery .animate() 函数 (docs)。

在您的情况下，它应该如下所示：

$('#button').click(function() {
    $('#element').animate({
        $('#element').css('bottom', '42px');
    }, 5000, function() {
    });
});

5000 是动画的时间，以毫秒为单位。

【讨论】：

感谢 Mateusz，最后它被隐藏在了这里： $(vars.thumb_tray).stop().animate({bottom : 0, AvoidTransforms : true}, 300 );
@David777 欢迎您。如果有帮助，请将答案标记为已接受。