关于jquery淡入淡出幻灯片的post(https://stackoverflow.com/q/10061847/1688202)。
我想知道该方法是否可以保留? 这样内容面板将是标准可见的,当点击时消失。
它试图改变JQuery代码中的一些变量,但我没有成功地做到这一点。
以下代码由Shef编写(https://stackoverflow.com/users/645186/shef)
由蝙蝠侠解决
.panel.default { display:block; } .panel.default .content{ display:block; }
到CSS,并将类默认添加到您要在加载页面时显示的面板,例如
https://jsfiddle.net/nhEn6/
1. CSS
div.panel { display:none; position: absolute; top: 0; width:70%; right:0%; height: 100%; z-index: 3; margin: 0; overflow:hidden; background-color:black; } .panel div.content { display:none; font-family:arial; color:white; padding:50px; overflow:hidden; } span.close { position:absolute; right:10px; top:15px; cursor:pointer; }
2.标记
X Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam
X Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam
3. jQuery
$(document).ready(function() { var $panels = $('.panels > .panel'); $('#menu > li').on('click', 'a', function() { $panels.filter('.'+this.id).trigger('togglePanel'); }); $panels .on('togglePanel', function(){ var $this = $(this) , $activePanels = $panels.filter(':visible').not($this); if ($activePanels.length) { $activePanels .one('panelHidden', function(){ $this.is(':visible') ? $this.trigger('hidePanel') : $this.trigger('showPanel'); }) .trigger('hidePanel'); } else { $this.is(':visible') ? $this.trigger('hidePanel') : $this.trigger('showPanel'); } }) .on('hidePanel', function(){ var $this = $(this); $this.find('.content').fadeOut(500, function() { $this.animate({ 'width': 'hide' }, 1000, function(){ $this.trigger('panelHidden'); }); }); }) .on('showPanel', function(){ var $this = $(this); $this.animate({ 'width': 'show' }, 1000, function() { $this.find('.content').fadeIn(500, function(){ $this.trigger('panelShown'); }); }); }); $panels.find('.content .close').on('click', function() { $(this).closest('.panel').trigger('togglePanel'); }); });
只需添加:
.panel.default { display:block; } .panel.default .content{ display:block; }
到CSS,并将类default
添加到您要加载页面时要显示的面板,例如
你可以加
style="display:block;"
内联到您希望默认显示的html元素。
您需要将此添加到panel
和content
类。
需要了解更多jQuery教程分享扭转jquery淡入淡出滑动面板,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享扭转jquery淡入淡出滑动面板相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981885.html
赞 (0)