动画类切换/元素交换

我已经写了一个函数，当单击时（隐藏一个div并显示另一个），用“关闭”按钮交换“菜单”按钮，反之亦然。我努力为每个交换的切换添加一个动画。动画类切换/元素交换

这是我有：

$(document).ready(function() { 
    $('#menu-button').on('click', function() { 
    $('#menu-button').toggleClass('inactive', 1000); 
    $('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000); 
    }); 

    $('.close-trigger').on('click', function() { 
    $('#close-button').toggleClass('active').toggleClass('inactive', 1000); 
    $('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000); 
    }); 
});

我也试过fadeIn/fadeOut/fadeToggle，而不是toggleClass无济于事。 fadeToggle的问题是两个元素同时短暂出现，并且仍然没有淡出动画。有没有更好的方法来编程呢？

来源

2016-11-20 Mario Parra

toggleClass()不允许动画。第二个理由不是时间。请参阅该文档：

http://api.jquery.com/toggleclass/

我想对你最好的是CSS转换：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

如果你不希望使用的过渡，会做的事：

$('#menu-button').on('click', function() { 
    $('#menu-button').hide(); 
    $('#close-button').fadeIn(); 
    }); 

    $('.close-trigger').on('click', function() { 
    $('#close-button').hide(); 
    $('#menu-button').fadeIn(); 
    });

来源

2016-11-20 03:32:51

请尽量将

$(document).ready(function() { 
 
    $('#button1').on('click', function() { 
 
    $('#button1').hide(); 
 
    $('#button2').show().addClass('toggle'); 
 
    }); 
 
    $('#button2').on('click', function() { 
 
    $('#button2').hide(); 
 
    $('#button1').show().addClass('toggle'); 
 
    
 
    }); 
 

 
    
 
    
 
});

#button2 
 
{ 
 
    display:none; 
 
} 
 
.button.toggle 
 
{ 
 
    opacity: 1; 
 
\t animation-name: fadeInOpacity; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: ease-in; 
 
\t animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<button id="button1" class="button" >button1</button> 
 
<button id="button2" class="button" >button2</button>

来源

2016-11-20 03:36:22

如果你想使用toggleClass，你必须在你的样式表一个CSS过渡伴随着它。否则，该元素将简单消失，因为toggleClass本身不提供动画。

一个CSS过渡将是简单的添加到您的样式表，一切就必须将放置这些属性为您的类规则：

transition-property: all; 
transition-duration: 0.5s; /* or however long you need it to be */

请记住，如display属性不能动画，因此您必须使用诸如opacity之类的属性来控制外观，因为它是一个数字，所以可以进行动画制作。

来源

2016-11-20 03:37:17 333

动画类切换/元素交换

回答

相关问题