प्रोग्रामिंग, सवालों के जवाब में मदद करें / जावास्क्रिप्ट / मैं jQuery UI टैब के साथ CSS बदलाव कैसे करूं? - जावास्क्रिप्ट, jquery, css, jquery-ui, css3

मैं jQuery UI टैब के साथ कैसे सीएसएस संक्रमण करते हैं?-जावास्क्रिप्ट, jquery, सीएसएस, jquery-ui, css3

जब उपयोगकर्ता किसी टैब पर क्लिक करता है तो मैं टैब के बीच सहज बदलाव चाहता हूं।

मुझे पता है कि jQuery टैब बुनियादी एनिमेशन का समर्थन करता है (इस प्रश्न के बारे में देखें एनीमेशन एफएक्स), लेकिन मैं कैसे कर सकते हैं चिकनी संक्रमण?

उत्तर:

उत्तर № 1 के लिए 1

यह काम पाने के लिए आपको कुछ चीजें करने की आवश्यकता होगी:

JQuery UI के साथ आने वाले CSS का उपयोग न करें
अपने HTML को संरचित करें ताकि आपके टैब बाएं और दाएं स्लाइड हो सकें।
"बाएं" संक्रमण के लिए सीएसएस जोड़ें। उदाहरण के लिए:
```
#tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
```

जब एक टैब चुना जाता है, तो "बाएं" मान को बदलें।

$(function() {
var onTabChange = function(event, ui) {
$("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
};
$("#tabs").tabs().bind("tabsselect", onTabChange);
});

देख एक पूर्ण काम करने के उदाहरण के लिए यह संकेत देता है.

यह आधुनिक ब्राउज़रों के साथ काम करेगा जो संक्रमण का समर्थन करता है और सामान्य टैब व्यवहार में वापस आ जाता है यदि यह समर्थित नहीं है।

उत्तर № 2 के लिए 1

पिछले कुछ वर्षों में चीजें आसान हुईं, अब इसके लिए एक विकल्प बनाया गया है, उदाहरण के लिए स्लाइड टू लेफ्ट-आउट और राइट-इन-इन बस है:

$("#tabs .tabs-container-wrapper .tabs-container").tabs({
hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});