سعاد نشر 12 يناير 2016 أرسل تقرير مشاركة نشر 12 يناير 2016 أريد عمل حركة على صفحة لي على موقع، وذلك عند الضغط على زر.كود 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>لكن الحركة لا تعمل على الصفحة بشكل جيد، ما العمل لتصحيح ذلك؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 E.Nourddine نشر 13 يناير 2016 أرسل تقرير مشاركة نشر 13 يناير 2016 (معدل) جرب أن تغير الكود الخاص بك إلى هذا الكود: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>مثال تطبيقي. تم التعديل في 13 يناير 2016 بواسطة E.Nourddine اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
سعاد
أريد عمل حركة على صفحة لي على موقع، وذلك عند الضغط على زر.
كود Jquery:
لكن الحركة لا تعمل على الصفحة بشكل جيد، ما العمل لتصحيح ذلك؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.