Crossfading elements without resorting to position: absolute

I'm trying to crossfade two elements so that one replaces the other. Obviously, the appearing element has to be placed into the DOM before it fades in. Without absolute positioning, it moves the other elements out of place, which is what I need to avoid. Here is a fiddle of the current behaviour. I need the middle boxes to crossfade without the ugly move effect. I could probably enclose both in another container and position them absolutely within that, but is there a more elegant way? HTML:
  • One
  • Two
  • Three
CSS: li { display: inline-block; width:60px; border: 1px solid; text-align: center; } .animate-opac { -webkit-transition: opacity 1.5s ease-out; } .fade { opacity: 0; } .hidden { display:none; } JS: var $new = $('
  • 2.5
  • '); var $ul = $('ul'); window.setTimeout(function() { $('#two').toggleClass("animate-opac"); $new.toggleClass("animate-opac fade"); $('#two').after($new); $('body')[0].offsetWidth; $('#two').toggleClass("fade"); $new.toggleClass("fade"); $('#two').on("webkitTransitionEnd", function() { $(this).remove(); }); }, 500);

    以上就是Crossfading elements without resorting to position: absolute的详细内容,更多请关注web前端其它相关文章!

    赞(0) 打赏
    未经允许不得转载:web前端首页 » jQuery 答疑

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    前端开发相关广告投放 更专业 更精准