关于jQuery：Fadein无法在Opera和Firefox上使用


Fadein not working on opera and firefox

使用jquery 1.9.1来显示选项卡，选定的选项卡将显示一个div(1、2、3或4)，该div显示淡入效果。该效果似乎适用于最新版本的chrome和safari，但不适用于Firefox和Opera。我已经检查了包含@ -moz-keyframes和@ -o-keyframes的代码示例，并且看起来该代码是正确的(尽管我确定某些地方有问题)。

请参见#tab1，#tab2，#tab3，#tab4

谢谢

可以在以下位置查看并测试该示例：http://jsfiddle.net/guisasso/6f6PY/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!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>

Test

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

   
        // 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();
                });
            });
        });
   

<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>
Tab #1
</li>


<li>
Tab #2
</li>


<li>
Tab #3
</li>


<li>
Tab #4
</li>



</ul>

111111111111111 11111111111111111 1111111111111111111 1111111111111
222222222222222 22222222222222222 2222222222222222222 2222222222222
333333333333333 33333333333333333 3333333333333333333 3333333333333
444444444444444 44444444444444444 4444444444444444444 4444444444444

</body>
</html>
相关讨论

使javascript像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    // 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();
            });
        });
    });

尝试

相关讨论