代码之家  ›  专栏  ›  技术社区  ›  Ari

使用jquery切换CSS属性并对其进行动画处理

  •  0
  • Ari  · 技术社区  · 6 年前

    $('#button').click(function () { 
        $('#divName').animate({
            top: 90%,
        }, 1000, function(){
        });  
    });
    

    当单击按钮时,它将DIV的top属性设置为90%。

    我该怎么做?

    我的尝试似乎有效,但似乎很混乱:

    var state = false;
    
    $('#button').click(function () { 
        if (state) {
            state = false;
            $('#divName').animate({
            top: '50%',
            }, 1000, function(){
          });
        } else if (state == false){
            state = false;
            $('#divName').animate({
            top: '90%',
           }, 1000, function(){
         });
        }
    });
    
    3 回复  |  直到 6 年前
        1
  •  0
  •   azeós    6 年前

    你可以用它 CSS transitions . 使用jQuery只需切换一个类。

    $('#button').click(function () {
        $('#divName').toggleClass('animate');
    });
    .container {
      position: relative;
      height: 80vh;
      border: 2px solid red;
    }
    
    #divName {
      position: absolute;
      top: 50%;
      width: 100%;
      height: 50px;
      border: 2px solid blue;
      transition: top 1s linear;
    }
    
    .animate {
      top: 90% !important;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <button id="button">Press</button>
    <div class="container">
      <div id="divName"></div>
    </div>
        2
  •  0
  •   spanner1122    6 年前

    var state = false;
    
    $('#button').click(function() {
      percent = state ? 50 : 90
      $('#divName').animate({
        top: percent + '%',
      }, 1000, function() {});
      state = !state;
    });
    div {
      background-color: green;
      position: absolute;
      top: 50%;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <p id="button">clickme</p>
    
    <div id="divName">
      <p>hello</p>
    </div>
        3
  •  -1
  •   Stakvino    6 年前

    这里有一种方法可以删除jQuery添加的样式

    var div = $('#divName');
    $('#button').click(function () {
      var style = div.attr("style");
      if(style && style.includes("top")){
        div.attr("style", style.replace(/top:[^;]+;/,""));
      }else{
        div.css("top", "90%");
      }
    });
    #divName{
      width: 20px;
      height: 20px;
      border: black solid 1px;
      position: absolute;
      top:50%; /*you need to give an init value to top*/
      transition: top 1s linear;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <button id="button">click me</button>
    <div id="divName"></div>