Question

是否可以在CSS转换等javascript函数中添加转换？在代码片段中，单击按钮时，背景会改变颜色，这将是淡化效果。

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});

body {align-items: center;
justify-content: center;
text-align: center;
}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

Answer 1

试试这个

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    height: 200px;
    overflow: auto;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>



<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>

    document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transition = "all 2s";       // Standard syntax

</script>
</body>
</html>

Answer 2

只需在CSS中添加转换，就像这样。

$("#btn1").click(function() {
  $('body').removeClass();
  $('body').addClass('class1');
});

$("#btn2").click(function() {
  $('body').removeClass();
  $('body').addClass('class2');
});

$("#btn3").click(function() {
  $('body').removeClass();
  $('body').addClass('class3');
});

body {
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.class1 {
  background-color: red;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

body.class2 {
  background-color: green;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

body.class3 {
  background-color: powderblue;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

button {
  padding: 15px 32px;
  margin: 80px 10px;
  font-size: 16px;
  border-radius: 12px;
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="class1">
  <button id="btn1">RED</button>
  <button id="btn2">GREEN</button>
  <button id="btn3">BLUE</button>
</body>

如果您想使用jquery only进行此操作，则可以像.addClass( className [, duration ] [, easing ] [, complete ] )一样使用

注意： 但您必须添加 jquery-ui.js 文件才能使其正常运行。

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1',1000, "easeOutBounce" );
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2',1000, "easeOutBounce" );
});

$("#btn3").click(function() {
 $('body').removeClass(); 
 $('body').addClass('class3',1000, "easeOutBounce" );
});

body {align-items: center;
justify-content: center;
text-align: center;
}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

转换javascript功能

2 个答案: