Question

动画仅使用CSS完成。如何使用jQuery实现相同的动画效果？ https://jsfiddle.net/20ge4vsz/2/

我试过了：

function main() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew myspanNew', 200);
  });
};

$(document).ready(main);

没有用..

Answer 1

如何使用jQuery实现相同的动画效果？

Updated fiddle

您可以像这样更改这两个CSS规则名称

.mydivNew {
  width: 155px;
  height: 150px;
  background-color: #20b2aa;
  border: 2px dotted #20b2aa;
  border-radius: 100%;
  display: inline-block;
  margin: 10px 20px 0px 15px;
}

.mydivNew .myspan {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  margin: 40px 0px 0px 69px;
}

你的jQuery到这个

function main() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew', 200);
  });
};

$(document).ready(main);

您可以像这样编写脚本

$(document).ready(function() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('mydivNew', 200);
  });
});

根据评论更新，使用jQueryUI

Updated fiddle

＆＃13;

$(document).ready( function() {
  $('.mydiv').on('mouseenter mouseleave', function(){
    $(this).toggleClass('New', 300).find('span').toggleClass('New', 300);
  });
});

＆＃13;

.mydiv {
  width: 155px;
  height: 150px;
  border: 2px dotted #20b2aa;
  background-color: white;
  border-radius: 100%;
  display: inline-block;
  margin: 10px 20px 0px 15px;
  color: white;
}
.mydiv.New {
  background-color: #20b2aa;
}
.myspan {
  position: absolute;
  margin: 65px 0px 0px 69px;
  display: flex;
  flex-wrap: wrap;
}
.myspan.New {
  margin: 40px 0px 0px 69px;
}

＆＃13;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      
<div class="mydiv">
  <span class="myspan">A</span>
</div>
<div class="mydiv">
  <span class="myspan">B</span>
</div>

＆＃13;

使用jQuery动画

1 个答案: