2017-12-06 35 views
5

मैंने एक बटन समूह बनाया है, और चाहते हैं कि जब उपयोगकर्ता पिछले या अगले बटन की प्रत्येक बटन पृष्ठभूमि को चयनित/स्लाइड पर चुनता है, तो मैंने यह प्रभाव शुद्ध 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>

उत्तर

3

केवल छद्म के बाद एक सेट, पिछले बू पर tton। अब, सिबलिंग चयनकर्ताओं और सक्रिय वर्ग का उपयोग इसे बाएं स्थानांतरित करने के लिए, अपरिपक्व के रूप में करें। (सीएसएस में पिछले 2 शैलियों को देखने)

$('.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; 
 
    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; 
 
} 
 
.btn.btn-default.btn-active { 
 
    color: white; 
 
} 
 

 
.btn-group { 
 
    clear: both; 
 
    margin-top: 10px; 
 
} 
 

 
.RadioButton .btn:nth-child(3)::before { 
 
    content: ""; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: gray; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: .3s all ease; 
 
    z-index: -1; 
 
    left: 0px; 
 
} 
 

 
.btn-active:first-child ~ .btn::before { 
 
    transform: translateX(calc(-4px - 200%)); 
 
} 
 
.btn-active:nth-child(2) ~ .btn::before { 
 
    transform: translateX(calc(-2px - 100%)); 
 
}
<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>

-1

परिवर्तन स्थिति केंद्र

$('.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; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
.btn-active::before { 
 
    width: 100%!important; 
 
} 
 

 
.RadioButton .btn:nth-child(2)::before { 
 
    
 
transition: .3s all ease; 
 
} 
 

 
.RadioButton .btn:last-child::before { 
 
    
 
    transition: .3s all ease; 
 
} 
 

 
.btn-active:first-child::before { 
 
    
 
transition: .3s all ease; 
 
} 
 

 
.btn-active:last-child::before { 
 
    
 
    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>

+0

प्रभाव सही नहीं है, मैं पृष्ठभूमि (स्लाइड एनीमेशन के साथ) ले जाना चाहते हैं अगले या पिछला जो क्लिक किया जाता है पर निर्भर करता है। (मेरे स्निपेट पर, दाएं से बाएं से, पहले बटन पर क्लिक करें, फिर केंद्र, फिर एक छोड़ दिया)। मुझे यह प्रभाव चाहिए। – Padideh

संबंधित मुद्दे