简体   繁体   English

jQuery悬停效果以使div动画化时会留出空间

[英]Jquery hover effect to animate divs leaves space while animating

I have a page that i have been starting to setup here http://www.brandybrowauto.com/NEW.html that has a simple 3 pane window switcher. 我有一个页面,我已经开始在这里设置http://www.brandybrowauto.com/NEW.html ,它具有一个简单的3窗格窗口切换器。 On hover it will expand that pane and make the others smaller then on mouseout it goes back to normal. 悬停时,它将扩展该窗格,并使其他窗格变小,然后在鼠标移出时恢复正常。 When animating, there is no gap between the left and middle pane, but there is a small sliver that gets opened between the middle and right pane. 设置动画时,左窗格和中间窗格之间没有缝隙,但是在中窗格和右窗格之间有一个小条被打开。 All the panes are the same size and animate at the same speed at the same time and I'm not sure whats causing that gap and if its even something i can get rid of. 所有窗格的大小相同,并且同时以相同的速度进行动画处理,但我不确定是什么原因导致了该间隙,甚至还可以消除它。 This may be simple, but any help is appreciated. 这可能很简单,但是可以提供任何帮助。

$(document).ready(function(){
  $("#left").hover(function(){
    $("#left").stop().animate({width:754},"fast");
    $("#right, #middle").stop().animate({width:100},"fast");
  }, function() {
    $("#left").stop().animate({width:318},"fast");
    $("#right, #middle").stop().animate({width:318},"fast");
  });

  $("#middle").hover(function(){
    $("#middle").stop().animate({width:754},"fast");
    $("#right, #left").stop().animate({width:100},"fast");
  }, function() {
    $("#middle").stop().animate({width:318},"fast");
    $("#right, #left").stop().animate({width:318},"fast");
  });

  $("#right").hover(function(){
    $("#right").stop().animate({width:754},"fast");
    $("#left, #middle").stop().animate({width:100},"fast");
  }, function() {
    $("#right").stop().animate({width:318},"fast");
    $("#left, #middle").stop().animate({width:318},"fast");
  });
});

Turns out this has nothing to do with the jquery. 事实证明,这与jquery无关。 After looking at it again it was because the pane i had on the right was set to float right while the middle and left ones were float left. 再次查看之后,这是因为我在右侧的窗格被设置为向右浮动,而中间和左侧的窗格被向左浮动。 This caused the small gap when animating because until the animation was complete they were animating away from each other. 这导致了动画时的小间隙,因为在动画完成之前,它们彼此远离动画。 Changed so the all float left and it worked. 进行了更改,因此所有浮动都保留了,并且可以正常工作。 Thanks for those who looked into it for me. 感谢那些为我研究它的人。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM