通过文本按钮淡入文本答案

【问题标题】：Fading in text via text button通过文本按钮淡入文本
【发布时间】：2014-02-08 01:17:56
【问题描述】：

我目前正在使用 WordPress，我想通过单击另一个文本行来淡入一些文本。我只想要纯文本（例如作为按钮的文本）并具有很好的淡入效果。

我已经尝试过了，但它在 wordpress 中不起作用。我是从网上某处得到的：

html:

<span class="button">Text button</span>
<span class="fadein">You just clicked on "Text button"</span>

css:

.button { cursor: pointer; }

jquery：

$('.fadein').hide();

$('.button').on('click', function(){
     $('.fadein').fadeIn(2000);
});

【问题讨论】：

您需要分享您的标记以及您尝试过的内容
也许你检查了 jquery 的文档。 (jqueryui.com/show)
在 wordpress 中使用 jQuery 而不是 $

标签： javascript jquery html css wordpress

【解决方案1】：

@Satpal 是正确的，在 wordpress 中工作时您需要使用 jQuery 而不是 $。新代码如下所示：

jQuery('.fadein').hide();

jQuery('.button').on('click', function(){
     jQuery('.fadein').fadeIn(2000);
});

假设您已经调用了 jQuery 库并且您将代码放在正确的位置，那么上面的代码在 wordpress 中应该可以正常工作。正如@Giancarlo 提到的，您还应该将它包装在一个文档就绪脚本中，但它也需要采用 jQuery 形式，如下所示：

jQuery(document).ready(function(){
    jQuery('.fadein').hide();

    jQuery('.button').on('click', function(){
         jQuery('.fadein').fadeIn(2000);
    });
});

将此代码放入单独的 .js 文件中，并在主题的 functions.php 文件中使用 wp_enqueue_script 调用它

它应该可以正常工作

【讨论】：

【解决方案2】：

在加载 jQuery JavaScript 库之后尝试执行您的 jQuery 代码。此外，将您的 jQuery 代码包装在文档就绪范围内。

// Shorthand for $(document).ready()
$(function(){
  // Your jQuery code goes here
});

【讨论】：