simple fade transition - not reverse

Question

I have a simple div which the transition is toggle using the Jquery toggle function.

The problem I am having is the effect does not go in reverse?

$('.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;
}

As per your code, It is working fine for me. It is taking 10s time to for `opacity:0.2` and 0.2s time for revert back. — Samir, Oct 06 '16 at 09:15

score 1 · Answer 1 · answered Oct 06 '16 at 09:13

there is another way to do it by using css only.

 .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;
   }

working sample https://jsfiddle.net/69wn8046/1/

score 0 · Answer 2 · answered Oct 06 '16 at 09:14

At mouseover you want .mydiv selector to addClass .inactive on second line you are preventing it from adding that, and 2nd is transition-duration you have declared that has 10s transition:all 10s ease; reduce that to see reverse effect.

  $('.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>

simple fade transition - not reverse

2 Answers2