第二次点击jQuery反向动画

问题描述：

我想第二次点击时有一个反向动画，但第二个动画必须与第一个动画相反，但必须具有相同的动画。我也写在jquery中，因为我希望在单击对象后保持该位置，直到再次单击。第二次点击jQuery反向动画

我希望你明白我的意思。万分感谢！

的JavaScript：

$('.linguait').click(function() { 
    if (('.linguait').hasClass('active')) { 
     $('.linguait').removeClass('active'); 
     $('.linguait').addClass('deactive'); 
    } else{ 
     $('.linguait').removeClass('deactive'); 
     $('.linguait').addClass('active'); 
    } 
});

CSS：

linguait.active { 
    right:25%; 
    margin-right: -10px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

.linguait.deactive { 
    right:5%; 
    margin-right: -2px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
}

你有任何相关的HTML？这将有助于重现动画 – AGE

答

简单地改变你的jQuery使用.toggleClass()至极做你的整个事情你例如：

$('.linguait').click(function() { 
    $(this).toggleClass("active"); 
});

，并设置你标准（停用）在语言类，而不是它的流ñ。

linguait.active { 
    right:25%; 
    margin-right: -10px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

.linguait { 
    right:5%; 
    margin-right: -2px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
}

通过.toggleClass（），第二次点击没有动画。对象立即回到原来的位置。 –

你有没有试过改变过渡到'transition：all 2s;'？ – Joost

随着过渡：所有2s;第一次点击时动画也不起作用。 –

答

更新您的jQuery：

$(document).ready(function() { 
    $('.linguait').on('click', function() { 
    var $el = $(this); 
    if ($el.hasClass('active')) { 
     $el.removeClass('active'); 
     $el.addClass('deactive'); 
    } else if ($el.hasClass('deactive')) { 
     $el.removeClass('deactive'); 
    } else { 
     $el.addClass('active'); 
    } 
    }); 
});

使用CSS动画：

@keyframes foo { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 

.linguait.active { 
    animation: foo 2s infinite linear; 
} 
.linguait.deactive { 
    animation: foo 2s infinite linear reverse; 
}

我需要点击动画。 –

我添加了一些jQuery。 –

第二次点击jQuery反向动画

相关推荐