jQuery 高度更改在 Safari 中不起作用答案

【问题标题】：jQuery height change not working in SafarijQuery 高度更改在 Safari 中不起作用
【发布时间】：2013-08-12 19:29:50
【问题描述】：

我在以下网站上有一个 JS 功能，该功能在 Firefox 中运行良好，但在 Safari 中无法运行：http://rossbolger.com/kids/light-stories/

当鼠标悬停在名为 #hit-area 的容器上时，该功能会滑出名为 #image-thumbs 的缩略图网格。它通过首先将#image_thumbs 高度从'48px' 更改为'auto' 来工作（至少在Firefox 中），然后使用jQuery 的height() 测量高度。这个高度存储在一个变量中，然后使用 jQuery 的 css() 在鼠标悬停时返回给#image-thumbs。

网站上的代码有点像这样：

// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');

// Slide Up Thumbs
(function revealThumbs() {

    // On hover let the thumbs become their full height
    $('#image-thumbs #hit-area').hover(function(){ // Mouse over
        // Get the unrestricted height of the thumbs
        thumbs.css('height', 'auto');
        thumbs_height =  thumbs.height();

        // then put it back to what it was so we can animate it using CSS3 transition
        thumbs.css('height', 'inherit');

        // delay 0.1s before triggering the change in height (time for the calculations to complete)
        setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );

    }, function(){ // Mouse out
        hideThumbs();
    });
})();

// Hide thumbs
function hideThumbs(){
    thumbs.css('height', thumbs_original_height );
};

测量不受限制的高度并将其作为像素值传回的原因，而不是简单地将高度设置为“自动”，是为了通过 CSS3 创建滑动效果（即过渡：高度 0.5 秒）。仅当受影响的属性从一个数值变为另一个数值时才会发生转换。

感谢您对此进行错误测试的任何帮助。我什至还没有看过其他浏览器。

一切顺利，劳伦斯

【问题讨论】：

可能与变量的范围有关吗？刚刚发现 Safari 中的控制台将 hideThumbs() 中的“拇指”视为未定义。

标签： javascript jquery height css-transitions

【解决方案1】：

好的，我已经解决了...

在 javascript 文档（网站上的scripts.js）中，页面上方有一个函数调用了 hideThumbs() 函数。所以它不起作用，因为那时还没有声明 hideThumbs() 中的变量。有趣的是它仍然可以在 Firefox 和 IE9 中运行！

我已将所有这些代码移到其他函数之前的某个位置，现在问题已解决。 到目前为止，我只在本地完成了这项工作。我稍后会在上面的链接中更新网站。

【讨论】：