(CSS/jQuery) jQuery如何解决top和bottom属性的冲突

Question

有人知道如何使用 CSS 过渡和 jQuery 将 bottom 位置转换为 top？

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

EDIT ：在我的场景中，图像具有 100% 的屏幕宽度。当窗口调整大小时，我在 JS 中有一个代码，可以获取图像的新位置。例如，如果我的锚始终是“顶部”，在某些情况下，我的这个洞会出现几毫秒，如果我此时设置底部而不是顶部，它将解决我的问题。但我在动画中有这个“跳跃”。

我发了this fiddle 来了解我的问题。

对不起我的英语！有人对此有想法吗？谢谢！

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");
});

见updated test case on jsFiddle。