IF Internet Explorer 使用不同的 jQuery 函数

Question

我正在构建一个功能与 www.chanel.com 类似的主页。当您第一次加载页面时，我会通过 HTML5 嵌入一个循环播放的视频。为了兼容性和易用性，我想要一个 jQuery 函数来控制其在除 IE 之外的所有浏览器中的可见性（当链接悬停时隐藏），以及仅适用于 IE 的替代 jQuery 函数，隐藏视频并使图像可见在它的地方。

感谢您抽出时间！

HTML

<div id="content">
    <video id="vid_home" width="780px" height="520px" autoplay="autoplay" loop="loop">
        <source src="Video/fernando.m4v" type="video/mp4" />
          <source src="Video/fernando.ogg" type="video/ogg" />
    </video>
    <img id="img_home" src="Images/home.jpg" alt="Fernando Garibay />
</div>

Chrome/Safari/Firefox/Opera 的

// Navigation hover image preview
$('#img_home').css('display', 'none');
$('.nav').hover(function(){
    $('#vid_home').fadeOut(600, function(){
        $('#img_home').fadeIn(800);
    });
});
$('#item1').hover(function(){
    $('#img_home').attr('src', 'Images/music.jpg');
});
$('#item2').hover(function(){
    $('#img_home').attr('src', 'Images/photos.jpg');
});
$('#item3').hover(function(){
    $('#img_home').attr('src', 'Images/biography.jpg');
});
$('#item4').hover(function(){
    $('#img_home').attr('src', 'Images/discography.jpg');
});
$('#item5').hover(function(){
    $('#img_home').attr('src', 'Images/contact.jpg');
});
$('#item6').hover(function(){
    $('#img_home').attr('src', 'Images/blog.png');
});
// Navigation hover image leave
$('#trigger').mouseleave(function(){
    $('#img_home').fadeOut(600, function(){
        $('#vid_home').fadeIn(800)
    });
});

Javascript： IE 的 Javascript（任何版本）：

// Navigation hover image preview
$('#img_vid').css('display', 'none');
$('#item1').hover(function(){
    $('#img_home').attr('src', 'Images/music.jpg');
});
$('#item2').hover(function(){
    $('#img_home').attr('src', 'Images/photos.jpg');
});
$('#item3').hover(function(){
    $('#img_home').attr('src', 'Images/biography.jpg');
});
$('#item4').hover(function(){
    $('#img_home').attr('src', 'Images/discography.jpg');
});
$('#item5').hover(function(){
    $('#img_home').attr('src', 'Images/contact.jpg');
});
$('#item6').hover(function(){
    $('#img_home').attr('src', 'Images/blog.png');
});
// Navigation hover image leave without selection
$('#trigger').mouseleave(function(){
    var img = $('#img_home');
    if (img.attr('src') != 'Images/home.jpg'){
        img.fadeOut(600, function(){ 
            img.attr('src','Images/home.jpg');
            img.fadeIn(800);
        });
    }
});

Answer 1

该视频是一个转移注意力的视频，只不过您可能应该在看不到该视频时暂停并恢复播放以节省资源。我制作了一个简单的示例，表明您只需要一些 CSS 即可将它们分层。 http://jsfiddle.net/HJg6Q/1/

您更改图像源的代码是合理的，不过，如果您没有预先缓冲图像，您可能会遇到这样的情况：开始淡入最后加载的图像，然后弹出新图像。非常不专业。我个人建议为您要显示的每个图像使用唯一的 标签，并根据需要交叉淡入淡出它们。