اذهب إلى المحتوى
  • 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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...