Skip to content
Advertisement

My Jquery Transit is Not working, What should I do

I try to animate objects with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but it not working. so I want to coding like this https://codepen.io/sandrasofia/pen/pvbmNB

Questions are 1.My objects are not in the center and I need a blue color high as red box. 2. Why I can not run the Script? Thanks 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>

Advertisement

Answer

Looks like you are not including jQuery library, which is necessary to use this plugin.

You should however try and accomplish this with css only.

This one is just with css, you should probably tweak it where necessary, but it should give you a good start.

.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>

This example includes your jQuery code.

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>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement