首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Jquery显示不使用特效

Jquery显示不使用特效
EN

Stack Overflow用户
提问于 2014-09-05 03:23:46
回答 1查看 255关注 0票数 1

我试图使用jquery的show函数显示一个固定的div。show函数起作用了,但当我试图用jquery ui添加效果时就不起作用了。我有两个jquery和jquery用户界面链接在一个外部文件通过一个php包含。当我在chrome中使用检查器时,当我点击show按钮时,我可以看到我试图显示的div的蓝色方框,但是页面保持不变。

这是我的html:

代码语言:javascript
复制
<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>

这是我的jquery:

代码语言:javascript
复制
<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>

这是css (注意,我尝试显示的div有一个class和ID标记:

代码语言:javascript
复制
.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;
    }

}

我现在几乎一无所知,提前谢谢你

EN

回答 1

Stack Overflow用户

发布于 2014-09-05 03:49:43

http://jsfiddle.net/a9dbeo1o/

重新检查您的脚本引用。

要确保jQuery已准备就绪,请尝试:

代码语言:javascript
复制
if ( jQuery.isReady ) {  
    alert('jQuery is ready');
} 

编辑:

注意:我还看到您的js文件夹中有jquery css文件。

编辑2:

更新的fiddle:http://jsfiddle.net/a9dbeo1o/2/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25673529

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档