jQuery淡入活动元素，淡出不活动元素

jQuery fade in active element, fade out inactive elements

本文关键字：元素 淡出 不活动 jQuery 活动 淡入      更新时间：2023-09-26

更新

使用：

$(event.currentTarget).fadeTo(0, 1);

似乎工作，同时使用：

$('.btn .active').fadeTo(0, 1);

没有。知道为什么吗？

守则

jsFiddle链接：http://jsfiddle.net/SeanKilleen/fwerK/

下面的JavasScript代码：

var global_loggedOnUser = "User1";
$(document).ready(function () {
    var viewmodel = (function () {
        this.feedbacktype = ko.observable("None");
        this.currentPage = ko.observable(location.href);
        this.currentUsername = global_loggedOnUser;
        this.updateFeedbackType = function (item, event) {
            var newText = $(event.currentTarget).children("span").text();
            $('#buttonList button').removeClass('active');
            $(event.currentTarget).addClass('active');
            feedbacktype(newText);
            $('.btn').not('.active').fadeTo('fast', 0.3);
            $('.btn .active').fadeTo('fast', 1);
        };

        return {
            pageUserIsOn: currentPage,
            theUser: currentUsername,
            feedbackType: feedbacktype
        };
    })();

    ko.applyBindings(viewmodel);
});

目标

  • 我有一个按钮列表
  • 当有人点击按钮时，我想确保他们点击的按钮变成100%的不透明，其余的按钮变成30%的容量

我试图通过向按钮添加一个"活动"类并将其从所有其他类中删除，然后根据类执行淡入淡出来实现这一点。

问题

  • 第一次点击，它就如预期的那样工作。单击的按钮为100%不透明度，所有其他按钮都会褪色
  • 第二次，之前高亮显示的元素会褪色，但单击的按钮并没有变为100%不透明度，尽管它被赋予了"活动"css类。
    • 我在活动类中添加了一个border-size元素，这样我就可以验证这一点。单击的项目将展开其边框，但不会淡入到100%的不透明度

我错过了什么？

如果要选择两个类都不是.btn 的.active后代的元素，请删除类之间的空格

$('.btn .active').fadeTo('fast', 1);

应该是

$('.btn.active').fadeTo('fast', 1);

更新的fiddle

相关文章：