（CSS / jQuery的）如何解决顶部和底部的性质与jQuery之间的冲突((CSS/jQuer

有人知道如何转换一个bottom位置， top与CSS过渡和jQuery？

我需要改变我的形象的锚。 我有这个问题。 之间存在冲突bottom和top 。

编辑 ：在我的情况下，图像在屏幕的宽度的100％。 当窗口大小，我在JS whoes代码获取图像的新位置。 如果我的主播总是“顶”例如，在某些情况下，我有这个洞谁出现，弥补severals毫秒，如果我在这一刻底部机顶盒，而不是将解决我的问题。 但我在动画这个“跳”。

我做了这个小提琴明白我的问题。

对不起我的英语不好！ 有人对这个想法？ 谢谢 ！

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更新测试用例 。

文章来源: (CSS/jQuery) How resolve the conflict between top and bottom property with jQuery