मैंने एक बटन समूह बनाया है, और चाहते हैं कि जब उपयोगकर्ता पिछले या अगले बटन की प्रत्येक बटन पृष्ठभूमि को चयनित/स्लाइड पर चुनता है, तो मैंने यह प्रभाव शुद्ध css
के साथ बनाया और कक्षा को जोड़ने या निकालने के लिए बस jquery
का उपयोग किया । अब समस्या तब होती है जब आप All
बटन पर क्लिक करते हैं, तो New
यह ठीक काम करता है, लेकिन यदि आप Used
पर क्लिक करते हैं तो स्लाइड सही स्थिति में काम नहीं करती है।पृष्ठभूमि स्लाइड एनीमेशन बनाना
इस आशय मैं transition
और ::before
इस्तेमाल किया के लिए, शुद्ध css
या न्यूनतम jQuery, javascript
या jquery
कोड नहीं बहुत से इस समस्या के समाधान की जरूरत है।
तर्क इस पृष्ठभूमि स्थानांतरित करने के लिए है:
.RadioButton .btn:first-child::before {
right: 0;
transition: .3s all ease;
}
.RadioButton .btn:nth-child(2)::before {
transition: .3s all ease;
}
.RadioButton .btn:last-child::before {
left: 0;
transition: .3s all ease;
}
.RadioButton .btn:nth-child(2)::before
पर समस्या मैं right:0
या left:0
उपयोग नहीं कर सकते क्योंकि अगर मैं हर एक का उपयोग करें, स्लाइड प्रभाव को सही स्थिति में किसी भी समाधान काम नहीं?
क्या मैं अब तक की कोशिश की:
$('.RadioButton').each(function(){
\t $(this).find('.btn').each(function(){
\t \t $(this).click(function(){
\t \t \t $(this).parent().find('.btn').removeClass('btn-active');
\t \t \t $(this).addClass('btn-active');
\t \t });
\t });
});
body {
direction: rtl;
}
.RadioButton .btn {
width: 33%;
float: left;
margin: 0;
box-sizing: border-box;
position: relative;
font-size: 11px;
min-height: 30px!important;
line-height: 30px;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.btn-default {
border: 1px solid gray;
color: gray;
}
.btn-group>.btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group>.btn:nth-child(2) {
border-radius: 0;
}
.btn-group>.btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.RadioButton .btn::before {
content: "";
height: 100%;
width: 0%;
background: gray;
position: absolute;
top: 0;
transition: .3s all ease;
z-index: -1;
}
.btn-active::before {
width: 100%!important;
}
.RadioButton .btn:nth-child(2)::before {
right: 0;
transition: .3s all ease;
}
.RadioButton .btn:last-child::before {
left: 0;
transition: .3s all ease;
}
.btn-active:first-child::before {
left: 0;
transition: .3s all ease;
}
.btn-active:last-child::before {
left: 0;
transition: .3s all ease;
}
.btn.btn-default.btn-active {
color: white;
}
.btn-group {
clear: both;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RadioButton btn-group" id="searchType">
\t <a class="btn btn-default" data-val="0">Used</a>
\t <a class="btn btn-default" data-val="1">New</a>
\t <a class="btn btn-default btn-active" data-val="2">All</a>
</div>
प्रभाव सही नहीं है, मैं पृष्ठभूमि (स्लाइड एनीमेशन के साथ) ले जाना चाहते हैं अगले या पिछला जो क्लिक किया जाता है पर निर्भर करता है। (मेरे स्निपेट पर, दाएं से बाएं से, पहले बटन पर क्लिक करें, फिर केंद्र, फिर एक छोड़ दिया)। मुझे यह प्रभाव चाहिए। – Padideh