3

我看过其他问题，似乎没有人和我有同样的问题，这总是令人兴奋的！

当您到达该页面时，我正试图整齐地查看我的页面内容。一切都被 CSS 挡住了。单击一个大链接，可删除所有编辑效果。我已经成功地让 jQuery 删除了已编辑的样式类，但它根本没有动画。我正在使用 jQuery UI 库。我看到有人提到它不适用于!important属性，无论有没有我都没有区别，没有!important我无法覆盖属性。

请帮助obiwan，你是我唯一的希望！

** 注意，我正在尝试使用 JQuery UI 功能而不是直接 Jquery **

效果示例： http: //api.jqueryui.com/removeClass/

JS小提琴

实时开发站点

jQuery

$(document).ready(function(){
    $("#educate").addClass("redactedtext redactedblocks" );
    $("#join").click(function() {
      $("#educate").removeClass("redactedtext redactedblocks", 1000 );
      $('#join').contents().unwrap();
    });
});

和 PHP/正文

<article class="row">
  <article class="twelve columns mastblock predacted " id="make">
    <p><a href="#" id="join">Join</a> us in making a <strong>new</strong> kind of documentary</p>
  </article>
</article>

<section class="row " data-match-height >
  <article class="radius-top-left medium-4 columns mastblock " id="educate">
    <h1>Educational</h1>

    <p>Find out what is behind the actions that lead to slavery, human trafficking, and forced Labour. Have a more complete picture on why slavery still exsists.</p>

    <p>Learn more&#8230;</p>
  </article>

预期的操作是单击按钮，看到停电消失并恢复颜色。

4

2 回答 2

1

!important是的，如果一个类具有我刚刚测试过的属性，那么你不能为它设置动画。这里有 2 个小提琴可以证明这一点。

!important 演示：http: //jsfiddle.net/eaPcv/

普通演示：http: //jsfiddle.net/eaPcv/1/

所以你运气不好。

但是说你必须!important习惯否则样式不起作用是不正确的。当然可以建立一个网站，而无需使用!important和查看，因为你有很多，!important然后你正在编写糟糕的代码并且你在某处做错了什么。

于 2013-08-23T11:11:28.113 回答
1

CSS Animation 为这个问题提供了一个更通用的解决方案。适用于所有主要浏览器（有一些警告......）

这是和示例，基于我认为您要实现的目标...

http://jsfiddle.net/adrianjmartin/xLpft/

<style>
.redacted {
  background-color:black;
  color:black;
 }

 @keyframes unredact{
  to{
   background-color:white;
   }
  }
 @-webkit-keyframes unredact{
    to{
    background-color:white;
 }
}

</style>

<script>
  window.addEventListener( "load" , function(){

  var p = document.querySelectorAll("P");



  for( var ii = 0 ; ii < p.length ; ii++ ){

    var t = p[ii].textContent;
    var a = t.split( ' ' );
    var h = "";

    for( var i = 0 ; i < a.length ; i++ ){
      h += "<span class='redacted'>"+a[i]+" </span>";
    }
    p[ii].innerHTML = h ;
    }

  });

  window.addEventListener( "click" , function(){

    var spans = document.querySelectorAll( "P span.redacted");
    for( var i = 0; i < spans.length ; i++ ){
    var delay = Math.random(3);

       var delay = Math.random(3);
    var style = "-webkit-animation: unredact forwards 3s " + delay + "s;";
        style += "animation: unredact forwards 3s " + delay + "s";
    }
  });
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis fringilla nisi. Curabitur vitae mi ultrices nunc sodales sodales at eget est. Aenean placerat eleifend lorem sed congue. Vivamus rutrum mi tempus leo interdum, vel volutpat velit consequat. Pellentesque eu sem metus. Nullam quis mauris ultrices augue blandit consequat. Vestibulum sollicitudin odio sed lobortis lacinia. Vivamus semper est et sapien ultrices, non vestibulum sapien tincidunt. Vivamus nunc neque, tincidunt ut arcu quis, bibendum hendrerit odio. Suspendisse id molestie ligula. Nulla dapibus venenatis tellus, egestas imperdiet velit pretium pellentesque. Mauris risus nibh, feugiat et magna sit amet, malesuada sagittis tellus. Curabitur porta, turpis ac tincidunt pharetra, augue est sodales ipsum, vitae pharetra eros nisl nec ante. Duis mattis volutpat est, in hendrerit urna mattis sed.<p>

<p>In bibendum nisl sit amet libero tempus ullamcorper. Vivamus a augue scelerisque, fermentum lorem et, vehicula justo. Praesent aliquet venenatis libero eget bibendum. Nam imperdiet fermentum libero et sagittis. Fusce varius posuere arcu, convallis varius ante aliquam ac. Proin eu nisi commodo, interdum erat vitae, iaculis massa. Fusce quis elit ac lacus viverra adipiscing. In hac habitasse platea dictumst. Sed sodales mauris non condimentum ultricies. Maecenas at venenatis arcu. Vestibulum scelerisque lacinia libero, eu tincidunt diam egestas eu. Suspendisse eu eros nulla. Ut dignissim nisl sed turpis tristique aliquam.
</p>
于 2013-08-23T11:47:26.197 回答