jQuery高度更改在Safari中无法正常工作

时间:2013-08-09 02:56:48

标签: javascript jquery height css-transitions

我在以下网站上有一个JS功能,在Firefox中运行得很好但在Safari中没有运行:http://rossbolger.com/kids/light-stories/

当鼠标悬停在名为#hit-area 的容器上时,该功能会滑出一个名为#image-thumbs 的缩略图网格。它的工作原理(至少在Firefox中)首先将#image_thumbs高度从'48px'更改为'auto',然后使用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.5s)。仅当受影响的属性从一个数值变为另一个数值时才会发生转换。

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

一切顺利, 劳伦斯

1 个答案:

答案 0 :(得分:0)

好的,所以我已经解决了......

在javascript文档(网站上的scripts.js)中,有一个函数在页面上方调用hideThumbs()函数。所以它没有工作,因为hideThumbs()中的变量在那时没有被声明。有趣的是它应该仍然适用于Firefox和IE9!

我已经将所有这些代码移到了其他功能之前的某个点,现在问题就解决了。 到目前为止,我只在本地完成此操作。我稍后会在上面的链接中更新网站。