jquery: can i animate the position:absolute to position:relative?

前端 未结 5 1441
时光说笑
时光说笑 2021-02-05 21:39

i have a bunch of images that are positioned absolutely, i want to be able to click a button and have them all animate to where they would normally be on the page if they had th

5条回答
  •  半阙折子戏
    2021-02-05 22:23

    I like Tatu's solution but found this reusable code to be better for my purposes:

    function specialSlide(el, properties, options){
        //http://stackoverflow.com/a/2202831/
        el.css({
            visibility: 'hidden', // Hide it so the position change isn't visible
            position: 'static'
        });
        var origPos = el.position();
        el.css({
            visibility: 'visible', // Unhide it (now that position is 'absolute')
            position: 'absolute',
            top: origPos.top,
            left: origPos.left
        }).animate(properties, options);
    }
    

    Let's say I want to slide $('#elementToMove') to a new position, and I want it to take 1000 milliseconds to move. I can call this:

    var props = {'top' : 200, 'left' : 300};
    var options = {'duration': 1000};
    specialSlide($('#elementToMove'), props, options);
    

提交回复
热议问题