Chrome在jQuery slideToggle之后向页面底部添加空格

我使用jquery为www.brunodejonghe.be创建了一个弹出式页脚效果。Chrome在jQuery slideToggle之后向页面底部添加空格

它适用于FF，Safari，IE7 +和Opera。当我在Google Chrome中打开页脚时，会在页脚下添加空格。

有没有人知道我能做些什么？

在此先感谢！

jQuery脚本：

$('#contact').click(function() { 
    <!-- show panel --> 
    $("#contactpanel").slideToggle(1500); 

    if ($activated == 1) { 
     $('#contact').html("<h4>Contacteer me</h4>"); 
     $('#contactpanel').css('height', $('#contactpanel').height() + 'px'); 
     $activated = 0; 
    } 
    else { 
     $('#contact').html("<h4>Verberg</h4>"); 
     // fluid toggle 
     $('#contactpanel').css('height', $('#contactpanel').height() + 'px'); 
     // scroll to bottom page for pop up footer effect 

     // detect opera and fix scroll bug 
     if ($.browser.opera == true) 
     { 
     $('html').animate({ 
      scrollTop: $(document).height() - $('#contactpanel').height() + 'px' 
      }, 1500); 
     $activated = 1; 
     } 
     else { 
     $('html, body').animate({ 
      scrollTop: $(document).height() - $('#contactpanel').height() + 'px' 
     }, 1500); 
     $activated = 1; 
     } 
    } 
});

来源

2011-04-15 Lrnz

它看起来像safari等其他基于webkit的浏览器？ – 2011-04-16 13:14:29

它在Safari中正常工作。也许我应该从头开始重新构建，以发现Chrome和Safari之间的jQuery差异。 – Lrnz 2011-04-20 09:58:16

如果这不是太困难，那么这可能是一个选项。如果你确实找到了一些东西，那么一定要发布一个答案来帮助他人 – 2011-04-20 10:08:36

把overflow:hidden;到footer DIV，并去除来自#footer和#footer, .push的height:75px;解决了这个问题对我来说。

这就是说，我会建议一个完全不同的解决方案。我建议创建一个简单的转换，而不是通过JavaScript来动画转换。

CSS：

#contactpanel { 
    overflow: hidden; 
    max-height: 0px; 
    -webkit-transition: max-height 1s ease; 
    -moz-transition: max-height 1s ease; 
    ... /* and so on... */ 
} 
#contactpanel.visible { 
    max-height: 300px; /* Or so... */ 
}

的JavaScript：

var contact = document.getElementById('contact'); 
var panel = document.getElementById('contactpanel'); 
contact.addEventListener('click', function(e) { 
    panel.classList.toggle('visible'); 
});

在http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/看看为转变是如何工作的一个体面的解释，以及如何沿如下（未经测试）代码的东西线他们可能会让你的生活变得更简单。 :)

来源

2011-04-20 14:33:36

谢谢你，你的解决方案工作！我认为CSS3过渡非常棒，但由于它仍然与IE不兼容，我现在会坚持使用JQuery。 – Lrnz 2011-04-20 20:00:48

干杯麦克韦斯特，添加这内联到一个有问题的div我们有工作的一种享受。 – 422 2011-06-26 06:15:52

Chrome在jQuery slideToggle之后向页面底部添加空格

回答

相关问题