Fadein 不能在 Opera 和 Firefox 上工作答案

【问题标题】：Fadein not working on opera and firefoxFadein 不能在 Opera 和 Firefox 上工作
【发布时间】：2013-08-27 14:05:14
【问题描述】：

使用 jquery 1.9.1 显示选项卡，选中的选项卡显示一个显示 淡入淡出效果的 div（1、2、3 或 4）。该效果似乎适用于最新版本的 ie、chrome 甚至 safari，但不适用于 firefox 和 opera。我检查了包含 @-moz-keyframes 和 @-o-keyframes 的代码示例，看起来代码是正确的（不过我确信某处有问题）。

参见#tab1、#tab2、#tab3、#tab4

谢谢

可以在http://jsfiddle.net/guisasso/6f6PY/查看和测试现场示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>

<title>Test</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script>
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){
            $('ul.tabs').each(function(){
                // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links, use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                $active.addClass('active');
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function(e){
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });
    </script>

<style type="text/css">

.tabs {
border-bottom:3px #f2f2f2 solid;
padding-left:0px;
}

.tabs li {
list-style:none;
display:inline;
color:#08c;
}

.tabs a {
padding:5px 20px 5px 20px;
display:inline-block;
background:#ffffff;
text-decoration:none;
color:#08c;
top: 3px;
font-size: 22px;
line-height: 140%;
padding-top: 10px;
background: #ffffff;
box-sizing: border-box;
position: relative;
border-radius: 4px 4px 0 0;
margin-bottom:3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

.tabs a.active {
background: #ffffff;
border-bottom:3px orange solid;
color:#000000;
top:0px;
}
.tabs a:hover {
background: #f2f2f2;
top: 0px;
border-bottom:3px orange solid;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}

#tab1, #tab2, #tab3, #tab4 {
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}

 }
</style>
</head>
<body>
<ul class="tabs">

<li><a href='#tab1'>Tab #1</a></li>
<li><a href='#tab2'>Tab #2</a></li>
<li><a href='#tab3'>Tab #3</a></li>
<li><a href='#tab4'>Tab #4</a></li>

</ul>
<div id="tab1">111111111111111 11111111111111111 1111111111111111111 1111111111111</div>
<div id="tab2">222222222222222 22222222222222222 2222222222222222222 2222222222222</div>
<div id="tab3">333333333333333 33333333333333333 3333333333333333333 3333333333333</div>
<div id="tab4">444444444444444 44444444444444444 4444444444444444444 4444444444444</div>

</body>
</html>

【问题讨论】：

你为什么不使用一些jquery，它更容易
@Sharath 这就像在说“我正在变性，因为我有一个糟糕的约会”除非绝对必须，否则不要使用 Javascript。既然可以用纯 CSS 完成，为什么还要使用 Javascript？
跨浏览器兼容性？
当你将它用于单个选项卡时，我能够在 firefox #tab1 { animation: fadein 1s; -moz 动画：淡入 2s； /* Firefox / -webkit-animation: 淡入 1s; / Safari 和 Chrome / -o-animation: fadein 1s; / Opera */ } 是您对影响此行为的选项卡的 jquery 操作..
上面的代码，如果正确的话，应该适用于其他浏览器。

标签： jquery css css-animations

【解决方案1】：

像这样制作javascript

    // Wait until the DOM has loaded before querying the document
    $(document).ready(function(){
        $('ul.tabs').each(function(){
            // For each set of tabs, we want to keep track of
            // which tab is active and it's associated content
            var $active, $content, $links = $(this).find('a');

            // If the location.hash matches one of the links, use that as the active tab.
            // If no match is found, use the first link as the initial active tab.
            $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active.attr('href'));

            // Hide the remaining content
            $links.not($active).each(function () {
                $($(this).attr('href')).hide();
            });

            // Bind the click event handler
            $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.removeClass('active');
                $content.hide();

                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.addClass('active');
                $content.fadeIn();

                // Prevent the anchor's default click action
                e.preventDefault();
            });
        });
    });

try it

【讨论】：

我可以看到你改变了 $content.fadeIn();还有什么？