jQuery - 水平手風琴onClick

我想寫一個非常簡單的水平手風琴的東西。jQuery - 水平手風琴onClick

我有三個「橫幅」div和三個「區域」div，所以當我點擊橫幅時，相應的區域理想情況下應爲動畫效果以允許寬度變爲自動並且高度從最小高度變爲自動如果需要。

的代碼，我到目前爲止工作正常，在我的網站，但不是在jfiddle，這使我相信，在jfiddle進入一個愚蠢的錯誤：

$(document).ready(function(){ 
    $("#second_line_accordian_banner_one").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow", swing); 
    }); 
}); 

$(document).ready(function(){ 
    $("#second_line_accordian_banner_two").click(function(){ 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_two").animate({width:"300px"}, 2000, swing); 
    }); 
}); 

$(document).ready(function(){ 
    $("#second_line_accordian_banner_three").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"300px"}, 1000, swing); 
    }); 
});

感謝，

來源

2014-10-16 joshnik

忘了提及，在我的網站上它技術上滑到300px，但它非常非常笨重。 – joshnik 2014-10-16 10:13:41

檢查這個http://blogs.sitepointstatic.com/examples/tech/css3-target/accordionhorz.html#acc1，它是基於css的一個 – Aru 2014-10-16 10:17:22

DEMO

$(document).ready(function(){ 
    $("#second_line_accordian_banner_one").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_two").css({'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'none'}), 
    $("#second_line_accordian_area_one").css({'display':'block'}), 
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow"); 
    }), 

    $("#second_line_accordian_banner_two").click(function(){ 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").css({ 'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'none'}), 
    $("#second_line_accordian_area_two").css({'display':'block'}), 
     $("#second_line_accordian_area_two").animate({ width:"300px"},600); 
    }), 

    $("#second_line_accordian_banner_three").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").css({'display':'none'}), 
    $("#second_line_accordian_area_two").css({'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'block'}), 
    $("#second_line_accordian_area_three").animate({ width:"300px"},600); 
    }); 
});

來源

2014-10-16 11:48:48 himanshu

這是輝煌，謝謝！現在有道理。 – joshnik 2014-10-16 15:04:14

您需要在JSFiddle的左側菜單中激活jQuery

來源

2014-10-16 10:14:59 k4st0r42

http://jsfiddle.net/r8tvetr7/2/ - 謝謝 – joshnik 2014-10-16 10:21:53

jQuery - 水平手風琴onClick

回答

相關問題