Why does sliding (collapsing) from Right To Left create a scrollbar where LTR doesn't?

**tldr:** look here: http://joon.be/dalida/ hover over the yellow 'town' and over the blue 'town'. The yellow one doesn't create a scrollbar, the right one does. Why? **Long version:** I have a line entering from the left side to point at something when it is hovered over. This works. I'm trying to do the same from the right side, same principle just mirrored, and have figured out how to do this, but it has the weird side effect of creating a horizontal scroll bar, since the image is partially out of the screen. On the left side, this does not happen, even though it works almost exactly the same afai understand. Here's the left, working, code: $('.dalidatown').hover(function(){ $('.dalidapath').stop().animate({width: '903px'}); },function(){ $('.dalidapath').stop().animate({width: '0px'}); }); The 'path' is a div that has the line as background. Here's the CSS for this: .path { position: absolute; border: 0px; } .dalidapath { width: 0px; height: 83px; z-index: 10; top: 130px; left: 50%; margin-left: -1110px; background-image:url('bin/dalidapath.png'); } Now on the right side, I couldn't just use width, I had to play with the margin as well, so it looks like this: $('.therapietown').hover(function(){ $('.therapiepath').animate({width: '903px'}, {queue: false}).animate({marginLeft: '97px'}, {queue: false}); },function(){ $('.therapiepath').animate({width: '0px'}, {queue: false}).animate({marginLeft: '1000px'}, {queue: false}); }); this does everything I Want it to, other than create the scrollbar... Here's the relevant css: .path { position: absolute; border: 0px; } .therapiepath { width: 0px; height: 83px; z-index: 10; top: 130px; left: 50%; margin-left: 1000px; background-image:url('bin/therapiepath.png'); background-position:right top; } So you can see it live here: http://joon.be/dalida/

以上就是Why does sliding (collapsing) from Right To Left create a scrollbar where LTR doesn't?的详细内容,更多请关注web前端其它相关文章!

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

评论 抢沙发

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

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

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏