淡入淡出改變標籤？

因此，我對某些內容使用了製表符系統，但希望稍微爲其製作動畫。事實上，這些標籤完全按照他們應該的方式工作。點擊一個標籤，內容發生變化。田田！但是，我想知道的是，如果它有可能使標籤淡入視圖而不是僅僅彈出，並且當div的內容增長或縮小時，它會在這樣做時產生動畫效果。淡入淡出改變標籤？

這是我使用的代碼：我已經試過引用的我的早期就對.removeclass褪色的東西出來的問題之一

   $(document).ready(function(){ 
      $('ul.tabs').each(function(){ 
       var $active, $content, $links = $(this).find('a'); 

       $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
       $active.addClass('active'); 
       $content = $($active.attr('href')); 
       $links.not($active).each(function() { 
        $($(this).attr('href')).hide(); 
       }); 

       $(this).on('click', 'a', function(e){ 
        $active.removeClass('active'); 
        $content.hide(); 

        $active = $(this); 
        $content = $($(this).attr('href')); 

        $active.addClass('active'); 
        $content.show(); 

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

，但沒有成功。到目前爲止，我已嘗試添加我認爲可以工作的各種各樣的部分（.fadeIn（500）.addclass），但是我得到的結果不是很好。我已經使菜單隨機消失，標籤完全消失，我的一隻貓也吐了出來。不知道這是否連接，公平。

任何人都可以在這裏找到一隻手嗎？非常感謝。

來源

2014-02-12 Jeff Monk

我會將CSS3轉換應用到樣式更改。不應該需要編寫腳本。把你的例子放在小提琴裏，我們來看看。 http://jsfiddle.net – isherwood

我其實有點想出來，如下面的代碼所示。唯一的問題是div並不能很好地適應內容，但它也不是很糟糕。淡入淡出部分起作用。我擔心因爲IE而使用轉換。我們的很多訪問者都使用IE的舊版本，所以我必須嘗試支持到大約8個。以前的任何事情都可以吸引它。：d –

nermind，想通了！我注意到它使用.show，所以我用.fadeIn替換它，它的工作原理！

  $(document).ready(function(){ 
      $('ul.tabs').each(function(){ 
       var $active, $content, $links = $(this).find('a'); 

       $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
       $active.addClass('active'); 
       $content = $($active.attr('href')); 
       $links.not($active).each(function() { 
        $($(this).attr('href')).hide(); 
       }); 

       $(this).on('click', 'a', function(e){ 
        $active.removeClass('active'); 
        $content.fadeOut(300); 

        $active = $(this); 
        $content = $($(this).attr('href')); 

        $active.addClass('active'); 
        $content.delay(300).fadeIn(500); 

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

Woot！學習！

來源

2014-02-12 16:48:18

淡入淡出改變標籤？

回答

相關問題