Javascript jquerytoggle（'；slide'；）切换可见性状态，但不切换'；没有滑动效果

我有两个分区

category-block-1

和

category-block-2

<代码>类别-block-2具有

显示：无。我试着将它们从左向右滑动。下面是我的HTML结构的样子

<div class="top-categories-block">
    <i class="fa fa-caret-left category-left"></i>
    <ul class="top-categories-list">
        <div class="category-block-1">
             ...
        </div>
        <div class="category-block-2">
             ...
        </div>
    </ul>
    <i class="fa fa-caret-right category-right"></i>
</div>

这会切换可见性状态，但幻灯片不会生效。我已经包括了jQueryUIJS和css文件。
2
的内容被设置为浮动

在两个
的关闭
标记之前添加
解决了问题。
尝试以下操作。它正在工作。我刚刚添加了jQueryUI库的引用，并对其进行了更改
$（'.top categories'）
到
$（'.top categories block'）

下面是JS Fiddle的工作代码
首先更改
。顶级类别
为
。顶级类别块
和：

$('.category-block-1').show('slide', {direction:'right'}, 500);
$('.category-block-2').show('slide', {direction:'right'}, 500);

查看如何
$（…）.toggle（'slide'，{direction:'left'}，500）适用于不同的jQuery版本：



-不工作

$('.top-categories-block').on('click', '.category-left', function() {
    $('.category-block-1').toggle('slide', { direction: 'left' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'left' }, 500);
});

$('.top-categories-block').on('click', '.category-right', function() {
    $('.category-block-1').toggle('slide', { direction: 'right' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'right' }, 500);
});

$('.category-block-1').show('slide', {direction:'right'}, 500);
$('.category-block-2').show('slide', {direction:'right'}, 500);