我的 Jquery Transit 不工作，我该怎么办

时间：2021-04-27 09:45:02

标签： javascript html jquery css css-transitions

我尝试使用 jquery 插件 Jquery Transit 为对象设置动画：http://ricostacruz.com/jquery.transit/ 但它不起作用。所以我想像这样编码 https://codepen.io/sandrasofia/pen/pvbmNB

问题是 1.我的对象不在中心，我需要一个和红色框一样高的蓝色。 2. 为什么我不能运行脚本？ 谢谢 enter image description here enter image description here

var val0 = -10,
    val1 = 0,
    val2 = 5,
    val3 = 10;

$(".fa").transition({ scale:1, opacity:0.5, y:val2 } );
$("h3").transition({ scale:1.2, opacity:0, y:val3 }, 300);

var bigIcon = $(".actionIcon");
$.each(bigIcon, function (index, value) {

  var fa = $(this).find(".fa"),
      h3 = $(this).find("h3");
      
    $(this).hover(function() {          
            fa.transition({ scale:1.2, opacity:1, y:val0 }, 200 );
            h3.transition({ scale:1, opacity:1, y:val1 }, 150);
        }, function() {
            fa.transition({ scale:1, opacity:0.5, y:val2 });
            h3.transition({ scale:1.2, opacity:0, y:val3 }, 300);
        }
    );
});
.content{
  max-width: auto;
  margin: auto;
  padding: 0 30px;
  margin-left: 10%;
  margin-right: 10%;
}
.iconPlay {
  text-align:center;
  display: flex;
  justify-content: center;
}
.fa{
  font-size: 35px;
  display: block;
}
.iconPlay ul {
  list-style-type: none;
  width: 400px;
}
.iconPlay li {
  float: left;
  padding: 10px;
  min-width: 100px;
}
.iconPlay h3 {
  font-size: 0.8em;
  color: rgb(51, 3, 3); 
}

span {
  color: rgb(230, 24, 24);
}

.footer-basic {
  margin-top: 10px;
  padding:30px 0;
}
.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}
    <div class="content">
      <div class=" iconPlay">
        <ul>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
                <h3>Love</h3>
            </li>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
              <h3>Love</h3>
          </li>
          <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
            <h3>Love</h3>
        </li>
        <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
          <h3>Love</h3>
      </li>
      <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
        <h3>Love</h3>
    </li>
    <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
      <h3>Love</h3>
  </li>
        </ul>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>


<div class="footer-basic">
    <footer>
        <p class="copyright">2021</p>
    </footer>
</div>

1 个答案:

答案 0 :(得分：1)

您似乎没有包含使用此插件所必需的 jQuery 库。

不过，您应该尝试仅使用 css 来完成此操作。

这只是带有 css，您可能应该在必要时对其进行调整，但它应该会给您一个良好的开端。

.content{
  max-width: auto;
  margin: auto;
  padding: 0 30px;
  margin-left: 10%;
  margin-right: 10%;
}
.iconPlay {
  text-align:center;
  display: flex;
  justify-content: center;
}
.iconPlay .fa{
  font-size: 35px;
  display: block;
  opacity: .5;
  transition: all .3s ease;
}

.iconPlay li:hover .fa {
    opacity: 1;
    transform: translateY(-10px) scale(1.2);
}
.iconPlay ul {
  list-style-type: none;
  width: 400px;
}
.iconPlay li {
  float: left;
  padding: 10px;
  min-width: 100px;
}
.iconPlay h3 {
  font-size: 0.8em;
  color: rgb(51, 3, 3); 
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s ease;
}

.iconPlay li:hover h3 {
    transform: translateY(0) scale(1.2);
    opacity: 1;
}

span {
  color: rgb(230, 24, 24);
}

.footer-basic {
  margin-top: 10px;
  padding:30px 0;
}
.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="content">
      <div class=" iconPlay">
        <ul>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
                <h3>Love</h3>
            </li>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
              <h3>Love</h3>
          </li>
          <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
            <h3>Love</h3>
        </li>
        <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
          <h3>Love</h3>
      </li>
      <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
        <h3>Love</h3>
    </li>
    <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
      <h3>Love</h3>
  </li>
        </ul>
    </div>
  </div>


<div class="footer-basic">
    <footer>
        <p class="copyright">2021</p>
    </footer>
</div>

此示例包含您的 jQuery 代码。

var val0 = -10,
    val1 = 0,
    val2 = 5,
    val3 = 10;

$(".fa").transition({ scale:1, opacity:0.5, y:val2 } );
$("h3").transition({ scale:1.2, opacity:0, y:val3 }, 300);

var bigIcon = $(".actionIcon");
$.each(bigIcon, function (index, value) {

  var fa = $(this).find(".fa"),
      h3 = $(this).find("h3");
      
    $(this).hover(function() {          
            fa.transition({ scale:1.2, opacity:1, y:val0 }, 200 );
            h3.transition({ scale:1, opacity:1, y:val1 }, 150);
        }, function() {
            fa.transition({ scale:1, opacity:0.5, y:val2 });
            h3.transition({ scale:1.2, opacity:0, y:val3 }, 300);
        }
    );
});
.content{
  max-width: auto;
  margin: auto;
  padding: 0 30px;
  margin-left: 10%;
  margin-right: 10%;
}
.iconPlay {
  text-align:center;
  display: flex;
  justify-content: center;
}
.fa{
  font-size: 35px;
  display: block;
}
.iconPlay ul {
  list-style-type: none;
  width: 400px;
}
.iconPlay li {
  float: left;
  padding: 10px;
  min-width: 100px;
}
.iconPlay h3 {
  font-size: 0.8em;
  color: rgb(51, 3, 3); 
}

span {
  color: rgb(230, 24, 24);
}

.footer-basic {
  margin-top: 10px;
  padding:30px 0;
}
.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="content">
      <div class=" iconPlay">
        <ul>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
                <h3>Love</h3>
            </li>
            <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
              <h3>Love</h3>
          </li>
          <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
            <h3>Love</h3>
        </li>
        <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
          <h3>Love</h3>
      </li>
      <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
        <h3>Love</h3>
    </li>
    <li class="actionIcon"><a href="#"><div class="fa"><span class="fas fa-heart"></span></div></a>
      <h3>Love</h3>
  </li>
        </ul>
    </div>
  </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js"></script>


<div class="footer-basic">
    <footer>
        <p class="copyright">2021</p>
    </footer>
</div>

相关问题
最新问题