`
fantom
  • 浏览: 140445 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多层li或div展开伸缩效果

 
阅读更多
滚动效果:
 $('#dvmq li').eq(0).fadeOut('slow',function(){    $(this).clone().appendTo($(this).parent()).fadeIn('slow');$(this).remove();});


多层li或div展开伸缩效果,支持隐藏其他元素
JQuery(document).ready(function(){JQuery("div .content").hide();JQuery(".title").css("cursor", "pointer");JQuery(".title").click(function(){var nextGo = JQuery(this).parent().next();nextGo.addClass("contentGo");JQuery("div .content:visible:not(.contentGo)").hide();nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });nextGo.removeClass("contentGo");return false;})});


优化一下:
JQuery(document).ready(function(){JQuery("div .content").hide();JQuery(".title").css("cursor", "pointer");JQuery(".title").click(function(){var nextGo = JQuery(this).parent().next();JQuery("div .content:visible").not(nextGo).hide();nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });return false;})});


美化效果:
JQuery(document).ready(function(){JQuery("div .content").hide();JQuery("div .title").css("cursor", "pointer");JQuery("div .title").click(function(){var nextGo = JQuery(this).parent().next();JQuery("div .content:visible").not(nextGo).slideUp("slow");nextGo.animate({height: 'toggle', opacity: 'toggle'}, { duration: "slow" });return false;})});
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics