Question

我正在尝试写一种非常简单的水平手风琴。

我有三个横幅＆＃39; divs和three＆＃39; area＆＃39; divs所以当我点击横幅时，理想情况下，相应的区域应该是动画，以允许宽度变为自动，并且如果需要，高度将从最小高度变为自动。

到目前为止我的代码在我的网站上工作得很好，但在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);
  });
});

谢谢，

Answer 1

您需要在JSFiddle的左侧菜单中激活jQuery

Answer 2

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);
  });
});

jQuery - 水平手风琴onClick

2 个答案: