Question

我希望在此代码中添加和删除#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

Answer 1

你可以删除一个类并为同一个元素设置动画吗？对于那部分问题，我可以说：

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

但是如果你面对一些css会让class none显示为none，那么你必须先做动画然后再添加你的类。

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

你可以用fadeIn（）

做同样的事情

Answer 2

注意：我假设您要根据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 animate手动执行此操作：

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

动画添加/删除类

2 个答案: