Fadein無法在Opera和Firefox上工作

使用jquery 1.9.1用於顯示選項卡，選定的選項卡顯示div（1,2,3或4），其顯示淡入淡出效果。效果似乎在最新版本的ie，chrome甚至safari上都能正常工作，但在firefox和opera上沒有。我已經檢查了包含@ -moz-keyframes和@ -o-keyframes的代碼示例，並且它看起來代碼是正確的（但我確定某處出了問題）。Fadein無法在Opera和Firefox上工作

見＃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>

來源

2013-08-27 riseagainst

爲什麼你不使用一些jQuery，更容易 –

@Sharath這就像說「我有一個性別變化，因爲我有一個不好的約會」除非你絕對必須使用Javascript。爲什麼使用Javascript時，可以用純CSS完成？ – ninty9notout

跨瀏覽器兼容性？ –

做的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

來源

2013-08-27 14:25:42

我可以看到你改變了行$ content.fadeIn（）;還要別的嗎？ – riseagainst

它正在工作 http://jsfiddle.net/6f6PY/7/ –

這就是你在代碼上改變了所有，那一行嗎？ – riseagainst

Fadein無法在Opera和Firefox上工作

回答

相關問題