• 0

كيف أحرك الخلفية بشكل Slide عند الضغط عليها؟

أريد عمل حركة على صفحة لي على موقع، وذلك عند الضغط على زر.

كود Jquery:

$(".test").click(function() {
  $(".test").removeClass('active');
  $(this).addClass('active');
})

 

div{
  list-style-type: none;
}
div a {
  text-decoration: none;
}
#cont {
  background-color: white;
  width: 100%;
  padding: 2px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice {
  float: left;
  margin-right: 1px;
}
.choice div{
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  background: #ff3232;
  margin-left: 10px;
  transition: all 0.4s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice .left {
  background: linear-gradient(to right, white 50%, #b7d4e1 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.choice .right {
  background: linear-gradient(to right, #b7d4e1 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.choice .left.active {
  background-position: right bottom;
}
.choice .right.active {
  background-position: left bottom;
}
.choice div a {
  color: black;
}

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice">
  <div id="cont">
    <div class="test left active"><a href="#">Semaine</a>
        </div>
    <div class="test right"><a href="#">Mois</a>
        </div>
  </div>
</div>

لكن الحركة لا تعمل على الصفحة بشكل جيد، ما العمل لتصحيح ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

جرب أن تغير الكود الخاص بك إلى هذا الكود:

  • Css:
.choice{
  background-color: white;
  float: left;
  padding: 2px;
  height: 40px;
  border-radius: 20px;
  position:relative;
  z-index:1;
}
.link {
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  text-decoration:none;
  color:#000;
}
.pill{
  position:absolute;
  left:16px; top:0;
  width:100px; height:100%;
  background:#B7D4E1;
  border-radius:20px;
  z-index:-1;
  transition: 9999s transform .2s ease-out;
}
.link:nth-child(2):focus ~ .pill{
  transform: translatex(132px);
  transition: transform .18s ease-out;
}
.link:nth-child(1):focus ~ .pill{
  transform: translatex(0px);
  transition: transform .18s ease-out;
}
  • Html:
<div class="choice">
  <a class="link" href="#">Semaine</a>
  <a class="link" href="#">Mois</a>
  <span class="pill"></span>
</div>
تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن