Javascript 用于推荐设置的jQuery切换和幻灯片

我正在尝试为一些推荐制作一个自定义滑块。下图说明了它应该如何工作。第一份推荐信会突出显示，当用户单击下一份推荐信时，黄色背景会滑到该推荐信上，姓名和公司的字体颜色会发生变化，实际推荐信文本也会滑到该推荐信上

我设法制作了一个功能版本，你可以在这里看到，也可以在这里生活。任何改进和解释都将受到高度赞赏（我对jQuery还是很陌生）

以下是我使用的jQuery代码：

$("div.container-slider").click(

function () {
    $("div.active-slide").toggleClass("animate", 1000, function () {
        $("div.mike").toggleClass("current-font", function () {
            $("span").toggleClass("company-current");
        }),
        $("div.neil").toggleClass("inactive-slide", function () {
            $("span").toggleClass("company");
        });
    }),

    $("div.testimonial-text").slideToggle("slow", function () {
        $("div.testimonial-text-2").toggleClass("display-none");
    });
});

问题：

如何使字体颜色和重量的变化更加微妙

我如何针对特定的

span

代码，因为现在脚本会更改网站上所有地方的

span

颜色

如何使推荐文本幻灯片更平滑（类似于黄色背景）

看起来您已经在使用CSS转换了。你试过摆弄它们吗

使用

this

将作用域限制到当前元素，如

$（this）。查找（'span'）…

，或使用索引（

eq（）

）通过幻灯片指向目标，或为相关的跨度指定一个类指向目标

我不知道你为什么要切换“显示无”类，但这就是原因 可能是造成这种突然的。试着把它去掉

---

谢谢，我将使用转换来修复字体更改，并

此

来限制范围。我使用了

display none

类来隐藏第二封推荐信，然后在滑动第一封推荐信的同时，显示第二封推荐信。有更好的方法吗？我会在两个元素上使用

slideToggle

。