（CSS / jQuery）如何使用jQuery解决top和bottom属性之间的冲突

有人知道如何通过CSS转换和jQuery将bottom位置转换为bottom位置？

我需要更改图像的锚点。 我有这个问题。 bottom和top之间存在冲突。

编辑 ：在我的方案中，图像具有100％的屏幕宽度。 当窗口resize时，我在JS中有一个代码可以获得图像的新位置。 例如，如果我的锚总是“顶部”，在某些情况下，我有这个洞出现几毫秒，如果我设置此时底部而不是顶部，它将解决我的问题。 但我在动画中有这个“跳跃”。

我做了这个小提琴来理解我的问题。

对不起我的英语不好！ 有人对此有所了解吗？ 谢谢 ！

Answer 1

您可以通过使用类来绕过跳转，并在移动时删除内联样式，如下所示：

 if ( image.hasClass("bottom") ) { image.css("bottom", "").animate( { top: "0" } , 1000, function(){ image.removeClass("bottom"); }); } else { image.css("top", "").animate( { bottom: "0" } , 1000, function(){ image.addClass("bottom"); }); } 

并添加一个css类

 .bottom { bottom: 0; } 

根据http://jsfiddle.net/rZPq3/

编辑跨浏览器：

  var top = image.position().top + 'px'; var bottom = image.parent().height() - image.height() + 'px'; if (image.hasClass("bottom")) { image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" } , 500, function () { image.removeClass("bottom"); }); } else { image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"} , 500, function () { image.addClass("bottom"); }); } 

http://jsfiddle.net/wCuuX/

Answer 2

您应该坚持使用其中一个属性以避免冲突。 我改变你的小提琴只使用top并使用类来切换值。

 var toggle = $("button#toggle"); var image = $("div img"); toggle.click(function () { image.toggleClass("toggled"); }); 

请参阅jsFiddle上的更新测试用例 。