（CSS / jQuery的）如何解决顶部和底部财产与jQuery之间的冲突 [英] (CSS/jQuery) How resolve the conflict between top and bottom property with jQuery

问题描述

有人知道如何在底位置转换为顶与CSS过渡和jQuery？

Someone know how convert a bottom position to top with CSS transition and jQuery?

我需要改变我的形象的支柱。我有这个问题。之间是有冲突底和顶。

I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.

的修改的：在我的情况下，图像具有屏幕宽度的100％。当窗口大小，我在JS whoes一个code获得图像的新位置。如果我的主播总是顶例如，在某些情况下，我有这个洞谁显示，为severals毫秒，如果我在这一刻底部机顶盒，而不是将解决我的问题。但我有这个跳中的动画。

EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.

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

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

Sorry for my English! Someone have an idea about this? Thank you !

推荐答案

您可以避开跳跃通过使用一个类和删除内联样式，当您去，就像这样：

You can get around the jumps by using a class, and removing the inline style as you go, like so:

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/

这篇关于（CSS / jQuery的）如何解决顶部和底部财产与jQuery之间的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！