Question

我遇到以下问题。我有块包含几个代表产品的div。这个想法是，当用户点击其中一个产品时，产品（div）会突出显示，其余产品则不那么清晰。到目前为止，我能够解决这个问题，但是当用户点击第二个产品时，一切都不那么尖锐，包括新点击的产品。

到目前为止，这是我的jQuery代码：

$(document).ready(function () {

  var $all_listItems = $('.choose-format-block .format-area a');
  $all_listItems.on('click', function () {
    var index = $all_listItems.index(this);
    $(this).siblings().stop().fadeTo(300, 0.6);
    $(this).parent().siblings().stop().fadeTo(300, 0.3);
  });

});

这是我与jsfiddle的工作示例：http://jsfiddle.net/justamir/P7b5T/2/

希望有人可以帮我解决这个问题（我是jQuery的初学者）。

Answer 1

虽然可以使用jQuery动画执行此操作，但我建议使用CSS不透明度和CSS过渡执行此操作。看看更新的小提琴：

http://jsfiddle.net/P7b5T/3/

$(document).ready(function () {
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $('.container').addClass('selected');
        $('.format-area.active').removeClass('active');
        $(this).parents('.format-area').addClass('active');
    });
});

CSS：

.container .format-area {
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.container.selected .format-area {
    opacity: .3;
}

.container.selected .format-area.active {
    opacity: 1;
}

首先，容器获取类＆＃34;选择＆＃34;，表示选择了一个项目。这会将所有项目的不透明度设置为.3。然后，您将所选项目激活，将不透明度设置为1.

编辑：当你想要回到没有选定的项目时，只需删除从容器中选择的类。

Answer 2

问题是你没有重置已经fadeout div。

做类似下面的事情。每次点击reset之后fadeTo之后的所有其他项目除了点击之外的所有其他项目。

$(document).ready(function () {

//product size on click behaviour
    var $all_listItems = $('.choose-format-block .format-area a');
    $all_listItems.on('click', function () {
        $(this).parent().parent().children().stop().fadeTo(300, 1); //reset all Items
        $(this).parent().siblings().stop().fadeTo(300, 0.3); // fadeout others
    });

});

单击元素突出显示它并使其他不太明显

2 个答案: