动画添加/删除类

当我添加和删除此代码中的#left元素时，我正在使用fadeIn/Out。你可以删除一个类并为相同的元素设置动画吗？动画添加/删除类

var window_width = $(window).width(); 
var scroll_amount = window_width * .75; 
var left=$('#latest_wrapper'); 

$('#latest_wrapper #right').click(function() { 
    $('#left').removeClass('none'); 
    $('#latest_wrapper').scrollTo('+=' + scroll_amount, 300); 
});  

$('#latest_wrapper #left').click(function() { 
    $('#latest_wrapper').scrollTo('-=' + scroll_amount, 300); 

    actual_left = left.scrollLeft() - scroll_amount; 
    if(actual_left <= 0){ 
     $("#left").addClass('none'); 
    } 
}); 


# HTML page 
<div id="latest_wrapper" data-offset="1"> 

    <div id="left" class="arrow_wrapper none"> 
     <i class="icon-angle-left"></i> 
    </div> 
    <div id="right" class="arrow_wrapper"> 
     <i class="icon-angle-right"></i> 
    </div> 

    ... more

来源

2014-06-27 ok1ha

为什么在 “相同” 的时间？或者你是否想过类似于：$ item.removeClass（“hai”）。animate（opts）;'或者你是在谈论如何在类之间切换作为动画的一部分？ – Fallenreaper

所以你想淡出当一个类被添加时的元素，并在删除类时淡出它？请澄清。 – Blunderfest

你为什么不试试呢？没有理由不能淡入/淡出元素，并从/向同一元素中删除/添加类。 – forgivenson

你能删除类和动画相同的元素？你的问题的一部分，我可以说：

$("#left").addClass('none').fadeOut();

，但如果你面对一些CSS，这将使类没有被显示无，则必须首先做动画，然后添加你的类。

$("#left").fadeOut('normal', function(){ 
     $(this).addClass('none'); 
    });

你可以用淡入相同的（）

来源

2014-06-27 18:21:05 sulest

注意：我假设你要根据属性在CSS被设置动画。

这里有一堆选项，具体取决于您的具体使用情况。

最简单，最干净的方法是使用CSS过渡与您现有的JavaScript一起：

http://jsfiddle.net/j85Az/

.arrow_wrapper { 
    transition: all 0.5s ease; 
}

如果你想使用JavaScript这一点，你可以使用jQuery UI ：

http://api.jqueryui.com/addclass/

如果你不想使用jQuery UI，你将最有可能需要手动执行此操作使用jQuery动画：

$('#left').animate({ 
    //-- new CSS here 
}, { 
    complete: function() { 
    $(this).removeClass('none'); 
    } 
});

来源

2014-06-27 18:21:02

动画添加/删除类

回答

相关问题