简单的淡入淡出过渡 - 不反转答案

【问题标题】：simple fade transition - not reverse简单的淡入淡出过渡 - 不反转
【发布时间】：2017-08-09 23:14:31
【问题描述】：

我有一个简单的 div，它使用 Jquery 切换功能进行切换。

我遇到的问题是效果没有反转？

$('.mydiv').on('mouseover', function() {
    $('.mydiv').not(this).addClass('inactive');
})

$('.mydiv').on('mouseout', function() {
    $('.mydiv').removeClass('inactive');
})

.mydiv {
    width: 520px;
    height: 260px;
    float: left;
    position: relative;
    margin-bottom:40px;
    transition:all 10s ease; 
    opacity: 1;
}

.mydiv.inactive {
    transition:all 10s ease; 
    opacity: 0.2;
}

【问题讨论】：

根据您的代码，它对我来说工作正常。 opacity:0.2 需要 10 秒时间，恢复需要 0.2 秒时间。

标签： javascript jquery html css-transitions reversing

【解决方案1】：

还有另一种方法，只使用 css。

 .mydiv {
        width: 520px;
        height: 260px;
        float: left;
        position: relative;
        margin-bottom:40px;
         transition:all 10s ease; 
         opacity: 1;
         transition:all 10s ease;
    }
   .mydiv:hover {
      opacity: 0.2;
   }

工作样本https://jsfiddle.net/69wn8046/1/

【讨论】：

【解决方案2】：

在mouseover 你想要.mydiv selector to addClass .inactive 在第二行你阻止它添加它，第二个是transition-duration 你已经声明有10s transition:all 10s ease; 减少它以查看反向效果。

  $('.mydiv').on('mouseenter', function() {
    $(this).addClass('inactive');
});

 $('.mydiv').on('mouseleave', function() {
    $(this).removeClass('inactive');
});

.mydiv {
        width: 520px;
        height: 260px;
        float: left;
        position: relative;
        margin-bottom:40px;
         transition:all 1s ease; 
         opacity: 1;
         background:#111;
    }


    .mydiv.inactive {
         transition:all 1s ease; 
         opacity: 0.2;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">

</div>

【讨论】：