1

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

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

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

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

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

4

2 回答 2

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/

于 2013-07-07T23:07:57.060 回答
0

您应该坚持使用其中一种属性以避免冲突。我将您的小提琴更改为top仅使用并使用类来切换值。

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

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

于 2013-07-07T21:59:07.400 回答