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

Question

我有一个简单的 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;
}

Answer 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/

Answer 2

在mouseover您希望.mydiv selector to addClass .inactive在第二行.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>