如何添加一個幻燈片效果到刪除類jQuery

我一直在努力尋找我的問題在Google上的答案好幾天沒有任何運氣，所以我希望有人在這裏可以提供幫助。如何添加一個幻燈片效果到刪除類jQuery

代碼可以在這個鏈接http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu找到，它只是一個垂直標籤菜單，我已經做了點擊不改變懸停。

我想要的是當內容被點擊時，內容向上滑動並且新內容向下滑動（取決於哪個標籤被點擊以確定它是上升還是下降）。

這是jQuery的吧：

<script language="JavaScript"> 
     $(document).ready(function() { 
      $(".tabs .tab[id^=tab_menu]").click(function() { 
       var curMenu=$(this); 
       $(".tabs .tab[id^=tab_menu]").removeClass("selected") 
       curMenu.addClass("selected") 

       var index=curMenu.attr("id").split("tab_menu_")[1]; 
       $(".curvedContainer .tabcontent").css("display","none") 
       $(".curvedContainer #tab_content_"+index).css("display","block") 
      }); 
     }); 
    </script>

更新這裏是小提琴提前，斯威夫特http://jsfiddle.net/swift29/4pVtB/

感謝。

來源

2012-08-25 swift29

_What我要的是向上滑動的內容和新的內容滑下（取決於標籤被點擊，以確定它是否上升或下降，如果有意義的話）_否，這是沒有意義的。請詳細說明。 – sQVe

得到了一個jsfiddle作爲演示？ – naveen

它確實有道理可以添加您的CSS和代碼來擺弄？ –

可能是這個FIDDLE就足夠你了。你需要簡單的調用一個.slideup/slideDown方法，而不是簡單地使用display:block/none

$(document).ready(function() { 
$(".tabs .tab[id^=tab_menu]").click(function() { 
    var curMenu=$(this); 
    $(".tabs .tab[id^=tab_menu]").removeClass("selected"); 
    curMenu.addClass("selected"); 

    var index=curMenu.attr("id").split("tab_menu_")[1]; 
    $(".curvedContainer .tabcontent").slideUp('fast'); 
    $(".curvedContainer #tab_content_"+index).slideDown('fast'); 
}); 
});

來源

2012-08-25 10:26:10 user907860

非常感謝，我不敢相信我沒有想到這一點。是否有可能將新舊幻燈片放在一起，而不是重疊在一起的新幻燈片？ – swift29

@ swift29，如果我理解你的話，所有的jQuery動畫afaik都是異步執行的，它們並不相互依賴。對你起作用嗎？ – user907860

我的意思是有點像旋轉木馬樣式而不是重疊，雖然我只是好奇，但並不重要。 – swift29

一個律國防部：http://jsfiddle.net/4pVtB/7/

$(document).ready(function() { 
    $(".tabs .tab[id^=tab_menu]").click(function() { 
     var curMenu = $(this); 
     var cur_index=curMenu.attr("id").split("tab_menu_")[1]; 
     var old_index=$(".tabs .selected").attr("id").split("tab_menu_")[1]; 
     if (cur_index==old_index) { 
      return; 
     } 
     $(".tabs .tab[id^=tab_menu]").removeClass("selected"); 
     curMenu.addClass("selected"); 
     $("#tab_content_"+old_index).slideUp('slow'); 
     $("#tab_content_"+cur_index).slideDown('slow'); 
    }); 
});

來源

2012-08-25 11:47:40 Stano

如何添加一個幻燈片效果到刪除類jQuery

回答

相關問題