Question

在this site，屏幕右上角有一个“订阅”按钮。

当我点击此img时，以下div（位于结束<body>标记上方）：

<div id="mailchimp-rossnorth">
    <div class="mailchimp-form">

应该淡入，但他们不会。

jsFiddle here

对于订阅img，我有：

<div id="subscribe_slideoutTab">
    <a href="#" id="btn-subscribe"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/subscribe.png" alt="subscribe to our newsletter" title="subscribe to our newsletter" border="0" /></a>
</div>

在标题中，我有：

<script>
    jQuery('#btn-subscribe').on('click', function () {
        jQuery('#mailchimp-rossnorth').fadeIn(500);
        jQuery('.mailchimp-form').fadeIn(500);
    });
</script>

在页脚中，我有：

<div id="mailchimp-rossnorth">
    <div class="mailchimp-form">
        <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
        <script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us11.list-manage.com","uuid":"xxxxxxxxxxxxxx","lid":"xxxxxxx"}) })</script>
    </div>
</div>

在CSS中，我有：

#subscribe_slideoutTab {
    position: fixed;
    right: 0;
    top: 75px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    box-shadow: none;
    border: none;
    z-index: 9999;
    background-color: transparent;
}
#mailchimp-rossnorth {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #000;
    opacity    : 0.6;
    filter     : alpha(opacity=60);
    z-index    : 9998;
    display    : none;      
}
.mailchimp-form {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 9999;
    display  : none;
}

包含jQuery，所以我无法找出导致此问题的原因。

你能看到阻止

的是什么吗？

<div id="mailchimp-rossnorth">
    <div class="mailchimp-form">

显示？

更新：请检查this development page。

Answer 1

我在查看您的网站时收到“jQuery is not defined”错误。您将jquery包含在以下行中：

<script type="text/javascript" src="./index_files/jquery.js"></script>

但是当我尝试访问该URL时，我遇到了404错误。您需要确保您的jquery.js文件存在于该URL中，或者将src属性更改为正确的位置。

Answer 2

你的小提琴工作正常。您需要告诉JSFiddle在设置轮中使用JQuery库。在JavaScript框中查找单词＆＃34; JAVASCRIPT＆＃34;旁边有一个齿轮。单击cog并选择JQuery库，2.x.x版本。如果您这样做，您的订阅按钮工作。我点击了，事情渐渐消失了。你的JQuery很好。您链接的网站有多个错误。修复JS错误或删除这些脚本，这应该按预期工作。

Answer 3

我添加了外部jquery lib文件。

https://code.jquery.com/jquery-3.2.1.min.js

工作正常。

请检查jsfiddle。在外部链接中，您需要添加https://code.jquery.com/jquery-3.2.1.min.js

https://jsfiddle.net/krztd2yr/

Answer 4

当你添加

时，它在你的JsFiddle中工作正常

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

你的HTML代码中的

您在代码中缺少Jquery文件
更新：

这是在您的开发站点进行测试。

Answer 5

以下是您的工作代码：

jQuery('#btn-subscribe').on('click', function () {
  $('#mailchimp-rossnorth').fadeIn(500);
  $('.mailchimp-form').fadeIn(500);
});

#subscribe_slideoutTab {
    position: fixed;
    right: 0;
    top: 75px;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    box-shadow: none;
    border: none;
	z-index: 9999;
	background-color: transparent;
}
#mailchimp-rossnorth {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : #000;
    opacity    : 0.6;
    filter     : alpha(opacity=60);
    z-index    : 9998;
    display    : none;		
}
.mailchimp-form {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 9999;
    display  : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subscribe_slideoutTab">
	<img src="http://test.doig.com.au/rossnorth/index_files/subscribe.png" alt="subscribe to our newsletter" title="subscribe to our newsletter" border="0" id="btn-subscribe" data-pin-nopin="true">
</div>
<div id="mailchimp-rossnorth">
	<div class="mailchimp-form">
    text here
  </div>
</div>

jQuery fadein不适合我

5 个答案: