Javascript 显示自删除jquery ui脚本后未添加的内容

Javascript 显示自删除jquery ui脚本后未添加的内容,javascript,jquery,Javascript,Jquery,我对JavaScript非常陌生,这是我的第一个脚本之一 基本上,我试图创建一个脚本,将基于网格的新闻列表转换为基于列表的新闻列表。当我两者都有的时候,一切都很好 <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 我的html只是一个基

我对JavaScript非常陌生,这是我的第一个脚本之一

基本上,我试图创建一个脚本,将基于网格的新闻列表转换为基于列表的新闻列表。当我两者都有的时候,一切都很好

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
我的html只是一个基本列表

<div class="wrapper">
    <input type="submit" class="toggle" value="">
    <hr />
    <ul class="listNews-tiled">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
  • 项目
当我单击我的图标时,脚本删除了listNews平铺类并添加了listNews列表类,但它也添加了显示块:none;这是我不想要的

如果你能帮上忙,那就太棒了

链接到预览

不支持完成回调(与
fadeIn
fadeOut
相反),正如您所想。意思是这样的代码:
$(body).addClass('example',function(){…})
在添加类后不会运行该函数。该类将立即添加。文档说明,函数可以传递给
addClass
,但它应该返回将作为类名添加的字符串

作为一种修复,当您将函数传递给addClass时,请使用以下内容替换部件:

$(settings.listItem).addClass(settings.listStyleTwo).fadeIn(settings.fadeSpeed);
编辑: 哈,这个问题比我原来想的要多得多

我检查了,差异背后的原因(有jQueryUI的版本与没有jQueryUI的版本)实际上是addClass函数的实现。对于常规(普通)jQuery,addClass的情况与我前面描述的一样,而对于jQueryUI则完全不同,jQueryUI重写addClass函数,并使其能够在不使用给定类名和使用给定类名的状态之间设置转换动画。这就是为什么在附加了jQueryUI之后,您可以获得更平滑的动画,因为您不仅可以使用fadeIn/Out设置动画,还可以通过简单地使用带有回调的
addClass
设置状态动画


总而言之。如果你想摆脱jQueryUI,请坚持我上面粘贴的代码。如果想要更平滑的动画,请嵌入jQueryUI。如果您对jQueryUI的关注点是它的大小,那么您可以自己创建自定义下载,并选择一个可以提供新版本addClass函数的部分(这样核心就足够了)。

那么它是哪一个呢?它添加了“display:block”或“display:none”,您不想要哪一个?另外,你为什么不想要呢?我的意思是,这有什么问题?如果你看到这个例子,你可以看到我所说的“无显示”和“不希望显示”的意思。你看看这个例子,你可以看到我为什么想要淡入淡出效果。我希望列表在删除旧类并替换为新类时淡出,然后淡入以显示新列表样式的更新欢呼声,我已将其添加到我的第一个预览中,但它不起作用。这是我尝试创建的预览,但附带了JqueryUI脚本。没有jQueryUI连接就不能工作?若然,原因为何?你看到了什么错误?它工作正常,但不是很顺利,如果你看一下有原始代码和JqueryUI附加的,这是没有JqueryUI和新代码的新版本。正如你所看到的,它并没有那么平滑,你知道我怎样才能让它像JqueryUI版本一样平滑工作吗?
$(settings.listItem).addClass(settings.listStyleTwo).fadeIn(settings.fadeSpeed);