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

Question

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 .

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.

I made this fiddle to understand my issue.

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

Answer 1

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

and add a css class

.bottom {
    bottom: 0;
}    

as per http://jsfiddle.net/rZPq3/

edit for cross-browser:

    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

You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.

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

See updated test case on jsFiddle .