Fadein not working on opera and firefox
Using jquery 1.9.1 for displaying tabs, the selected tab displays a div
(1, 2, 3 or 4) that displays the fadein effect. The effect appears to work
on the latest versions of ie, chrome and even safari, but not on firefox
and opera. I've checked examples of code containing @-moz-keyframes and
@-o-keyframes and it appears that the code is correct (I'm sure that
something is wrong somewhere though).
See #tab1, #tab2, #tab3, #tab4
Thanks
The live example can be seen and tested at:
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'>Aluminum</a></li>
<li><a href='#tab2'>Copper</a></li>
<li><a href='#tab3'>Lead Coated Copper</a></li>
<li><a href='#tab4'>Ornamental</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>
No comments:
Post a Comment