[英]Using a conditional statement so jquery fadeIn/fadeOut only works when viewport >= 480px
[英]Enquire.js not working on page load, only works when screen <= 480px
所以我使用Enquire.js为我的网站添加和删除bootstrap的预定义css类。 这是我有的:
一些引导HTML缩略图:
<div class="row">
<div class="thumb thumb col-xs-12 col-md-3">
<a href="#" class="thumbnail">
<img src="..." class="img-rounded img-responsive" alt="...">
</a>
</div>
<div id ="thumb" class="thumb col-xs-12 col-md-3">
<a href="#" class="thumbnail">
<img src="..." class="img-rounded img-responsive" alt="...">
</a>
</div>
</div>
我已经设置了enquire.js,以便缩略图大小根据屏幕大小调整大小:
<script type="text/javascript">
var $info = $('.thumb');
enquire.register("(max-width: 480px)", {
match: function() {
$info.removeClass('col-xs-6');
$info.addClass('col-xs-12');
},
unmatch: function() {
$info.removeClass('col-xs-12');
$info.addClass('col-xs-6');
}
}).listen();
</script>
问题:
我遇到的问题是, 只要屏幕尺寸减小到480px或更低 ,enquire.js代码就会启动 。
因此,当首次加载网站时,调整大小代码将无法工作,直到我实际手动将其调整为480px或更低,然后您可以看到调整大小发生。
您可以在这里查看该网站
unmatch函数仅在从匹配状态变为不匹配状态时才起作用。
我想你也想使用设置功能。 这将在调用处理程序时运行javascript。 这是来自enquire.js网站的四个主要调用
enquire.register("screen and (max-width:45em)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},
// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {},
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}
});
我想您可能需要准备好文档中的代码。 这里使用jQuery:
<script type="text/javascript">
$(function() {
var $info = $('.thumb');
enquire.register("(max-width: 480px)", {
match: function() {
$info.removeClass('col-xs-6');
$info.addClass('col-xs-12');
},
unmatch: function() {
$info.removeClass('col-xs-12');
$info.addClass('col-xs-6');
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.