[英]Jquery show not working with effects
I'm trying to show a fixed div using the show function of jquery. 我正在尝试使用jquery的show函数显示固定的div。 The show function works, but not when I try to add an effect with jquery ui.
show函数有效,但是当我尝试使用jquery ui添加效果时无效。 I have both jquery and jquery ui linked in an external file via a php include.
我有通过php include在外部文件中链接的jquery和jquery ui。 When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
当我在chrome中使用检查器时,单击“显示”按钮时可以看到要显示的div的蓝色框,但页面保持不变。
This is my html: 这是我的html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by @EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by @CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery: 这是我的jQuery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag: 这是css(请注意,我要显示的div具有一个类和ID标记:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
@media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance 我目前很无能,请先谢谢
http://jsfiddle.net/a9dbeo1o/ http://jsfiddle.net/a9dbeo1o/
Recheck your script references. 重新检查您的脚本引用。
To make sure jQuery is ready, try: 为了确保jQuery准备就绪,请尝试:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit: 编辑:
Just a note: I also see you have your jquery css file inside your js folder. 请注意:我还看到您的js文件夹中有您的jquery css文件。
Edit 2: 编辑2:
Updated fiddle: http://jsfiddle.net/a9dbeo1o/2/ 更新的小提琴: http : //jsfiddle.net/a9dbeo1o/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.