Question

我有一个div（容器），里面有另一个div（后面）和里面的2个div（标题和描述）

<div class="container">
   <div class="back">
       <div class="title">text1</div>
       <div class="description">text2</div>
     </div>
</div>

On（容器）悬停我将一个类添加到（后面）然后添加到（描述），这很好，但是当我尝试进行反序列时jquery删除并再次将类添加到childs

$('.container').hover(function(){
        $(this).children('.back').addClass('back_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){  <--  here I move (.back div) with css and wait for the transition end
            $(this).children('.descripcion').addClass('descripcion_hover'); <-- here I fadeIn (.description div) with css and wait for the transition end
        })
    }, function() {

    //  Here is the problem, I need to do the inverse secuence fadeOut the (descripcion) and then move back the (back) div.

        $(this).find('.descripcion').removeClass('descripcion_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
            $(this).find('.back').removeClass('back_hover');
        });
});

Answer 1

<script type="text/javascript">
$(document).ready(function() {
  $('.container').mouseover(function() {
    $(this).children('.back').addClass('back_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
      $('.back_hover').mouseover(function(){
        $(this).find('.description').addClass('description_hover');
      }).mouseleave(function(){
        $(this).find('.description').removeClass('description_hover');
      });
  }).mouseleave(function() {
    $(this).find('.back').removeClass('back_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
  });
});
</script>

Answer 2

@Diego看了你的jsfiddle

1。你的最后一行“$（this）.find（'。back'）。removeClass（'back_over'）;”在“back_hover”类中缺少“h”，并且

2。同一行应为“$（this）。最近（'。back'）。removeClass（'back_hover'）;”

3。最后，为了回答为什么description_hover重新出现，你需要UNBIND从最初的悬停过渡到。

$(document).ready(function() {
    $('.container').hover(function() {
        $(this).children('.back').addClass('back_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
  /* add the unbind here */
  $(this).unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd").children('.description').addClass('description_hover');
    })
}, function() {
    $(this).find('.description').removeClass('description_hover').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
  /* replace .find('.back') with .closest('.back') */
  /* replace typo with .removeClass('back_over'); */
  $(this).closest('.back').removeClass('back_hover');
});
    });
});

请参阅分叉更新jsfiddle

jQuery addclass和removeclass从child到parent和reverse的顺序

2 个答案: