व्यूपोर्ट आकार के आधार पर jQuery होवर एनिमेशन

अधिक jQuery सीखने की प्रक्रिया में और कुछ कोड के साथ कोई समस्या है। जब मैं एक विशिष्ट तत्व पर होवर करता हूं तो मैं एनीमेशन प्रभाव (fadeIn/fadeOut) रखने का प्रयास कर रहा हूं।

हालांकि, जब व्यूपोर्ट का आकार बदलता है, यानि मोबाइल डिस्प्ले के लिए 480 पीएक्स से नीचे, मुझे होवर प्रभावों को अनदेखा करने की आवश्यकता है और केवल कॉल टू एक्शन प्रदर्शित करें। नीचे दिए गए मेरे कोड में मैं व्यूपोर्ट का पता लगाने की कोशिश कर रहा हूं और फिर उचित स्क्रिप्ट को एक if-then-else कथन के माध्यम से लागू कर रहा हूं।

मुझे संदेह है कि मैं कुछ ठीक से घोंसला नहीं कर रहा हूं या एक गलत जगह पर अर्ध-कॉलन है। मैं थोड़ी देर में घूर रहा हूं और अटक गया हूं।

मैंने संदर्भ के रूप में इन अन्य पदों को देखा।

यदि आपके कोई प्रश्न हैं या अतिरिक्त विवरण प्रदान कर सकते हैं तो मुझे बताएं।

// Script to display div call-to-action over logos

var detectViewPort = function(){
    var viewPortWidth = $(window).width();

// if its bigger than 480px then do the hover effect
    if (viewPortWidth > 480){

// On mouse over logo
    $('.unionlogo').hover(function() {              

// Display the call to action
        $(this).find('a.calltoaction').stop(false,true).fadeIn(400);
        $(this).find('p.union-name').stop(false,true).fadeOut(400);
    },
    function() {

// Hide the call to action
        $(this).find('a.calltoaction').stop(false,true).fadeOut(400);
        $(this).find('p.union-name').stop(false,true).fadeIn(400);
    });
// if its smaller than 480px then just show the call-to-action
}else{
    $('a.calltoaction').show();
};

$(function(){
  detectViewPort();
});

$(window).resize(function() {
   detectViewPort();
});
0

2 उत्तर

क्या आपने यह देखने के लिए अपने कंसोल में देखा कि त्रुटि संदेश क्या था? जैसा कि आपने कहा था, आपने एक ब्रैकेट छोड़ा था। आपको अपने कोड को थोड़ा बेहतर स्वरूपित करना चाहिए, और यह स्पष्ट होगा।

var detectViewPort = function(){
    var viewPortWidth = $(window).width();

   //if its bigger than 480px then do the hover effect
    if (viewPortWidth > 480){

        $('a.calltoaction').hide();
       //On mouse over logo
        $('.unionlogo').off('mouseenter mouseleave');
        $('.unionlogo').hover(function() {              
           //Display the call to action
            $(this).find('a.calltoaction').stop(false, true).fadeIn(400);
            $(this).find('p.union-name').stop(false, true).fadeOut(400);
        }, function() {
           //Hide the call to action
            $(this).find('a.calltoaction').stop(false, true).fadeOut(400);
            $(this).find('p.union-name').stop(false, true).fadeIn(400);
        });
       //if its smaller than 480px then just show the call-to-action
    } else {
        $('.unionlogo a.calltoaction').stop(false,true).fadeOut(400);
        $('.unionlogo p.union-name').stop(false,true).fadeIn(400);
        $('a.calltoaction').show();
       //un bind the hover incase of browser resize
        $('.unionlogo').off('mouseenter mouseleave');


    };
}

$(function(){
    $(document).ready(function(){
        detectViewPort();
    });
});

$(window).resize(function() {
   detectViewPort();
});
0
जोड़ा
सुधार के लिए धन्यवाद। प्रारंभिक बग को ठीक करने के लिए माना जाता है, लेकिन किसी कारण से व्यूपोर्ट पर सशर्त अभी भी सम्मानित नहीं किया जा रहा है। 480px से कम व्यूपोर्ट्स पर होवर फ़ंक्शन अभी भी लात मार रहा है।
जोड़ा लेखक Berchman, स्रोत
अब मैं देख सकता हूं कि आकार 480px से कम है। 'उत्तरदायी डिजाइन व्यू' का उपयोग करके फ़ायरफ़ॉक्स में यह 465 पीएक्स है लेकिन ऊपर दिए गए उदाहरण में होवर फ़ंक्शन अभी भी ट्रिगर किया जा रहा है। ऐसा लगता है कि 'व्यूपोर्ट विड्थ' को बिल्कुल सम्मानित नहीं किया जा रहा है।
जोड़ा लेखक Berchman, स्रोत
हाय निक, असंबद्ध 480px से कम होने पर इस मुद्दे को हल कर लेता है, लेकिन जब मैं एक बड़े व्यूपोर्ट पर वापस आ जाता हूं तो अनियंत्रित 'छड़ें' और फिर सभी ऑब्जेक्ट्स पर कॉल-टू-एक्शन दिखाई दे रहा है। क्या सशर्त के पहले भाग पर "बांध" की पुष्टि करने का कोई तरीका है, और चीजों को वापस सेट करें जो वे थे?
जोड़ा लेखक Berchman, स्रोत
हाय निक, यह पसंद नहीं है कि पहले उदाहरण में बांधें और बिल्कुल ट्रिगर न करें। यह वास्तव में अजीब है कि यह काम नहीं कर रहा है। बाहर जाने की जरूरत है, लेकिन मैं वापस आऊंगा। अगर आपके पास कोई अन्य विचार है तो मुझे बताएं। यदि नहीं, कोई चिंता नहीं है। मैं जिस चीज की कोशिश कर रहा हूं उससे मुझे एक और तरीके से काम करना होगा। आपकी मदद और प्रयासों के लिए धन्यवाद!
जोड़ा लेखक Berchman, स्रोत
हाय निक, मैंने आपके लिए देखने के लिए एक jsfiddle बनाया है। अगर आपको इस पर कोई विचार है तो मुझे बताएं: jsfiddle.net/berchman/tTcV3/1 आप देखेंगे कि जब आप उल को प्रदर्शित करने वाली खिड़की का आकार बदलते हैं जो न केवल एनीमेशन ब्रेक करता है, लेकिन यह रीफ्रेश/पुनः लोड करने के बाद चिकनी फीडइन/फीड आउट करता है। अगर आपका कोई प्रश्न हैं, तो मुझे से पूछें। धन्यवाद!
जोड़ा लेखक Berchman, स्रोत
हाय निक, मदद करने की कोशिश करने के लिए धन्यवाद। मैं इसकी प्रशंसा करता हूँ। मुझे पता है कि मैं इसे सीएसएस के साथ कर सकता हूं, लेकिन कुछ ऐसा करने की कोशिश कर रहा था जो आईई 10 से पहले चिकनी संक्रमण का समर्थन करेगा। उस आईई ब्राउज़र के नीचे मैं काम करने के लिए सीएसएस संक्रमण नहीं प्राप्त कर सकता हूं, मैं इसे कैसे करने के लिए jQuery की कोशिश कर रहा था। कोई चिंता नहीं। थैंक्सगिविंग की शुभकामनाएं!
जोड़ा लेखक Berchman, स्रोत
हम्म। इसे सेट करने के बाद अपने दृश्य पोर्टविड्थ को लॉग इन करने के लिए कंसोल आज़माएं।
जोड़ा लेखक Nick M, स्रोत
मेरे अपडेट देखें। खिड़की 480 से कम होने पर होवर हैंडलर को हटाने के लिए मैंने एक बाध्य जोड़ा है। और मैंने एक docuemt.ready कॉल भी जोड़ा है।
जोड़ा लेखक Nick M, स्रोत
यह अजीब लगता है। हर बार जब आप इसका आकार बदलते हैं तो उसे उस फ़ंक्शन और बाइंडिंग को कॉल करना चाहिए। मैंने कोड अपडेट किया है, इसे आज़माएं।
जोड़ा लेखक Nick M, स्रोत
विचित्र। चिंता की कोई बात नहीं है। यदि आपके पास यह कहीं चल रहा है तो आप मुझसे लिंक कर सकते हैं और मैं एक नज़र डालूंगा।
जोड़ा लेखक Nick M, स्रोत
बर्चमैन, मैंने कुछ सामान एक साथ फेंक दिया है और यह करीब आ रहा है, माफ करना मेरे पास वास्तव में इस पर खर्च करने का अधिक समय नहीं है। एकमात्र मुद्दा मोबाइल मेनू की चमक है जब आप 480 से नीचे जाते हैं। एक और बात; आपको केवल सीएसएस का उपयोग करके ऐसा करने की कोशिश करनी चाहिए, क्या आपने कोशिश की है? काफी आसान होगा - आपको सीएसएस में होवर चयनकर्ता का उपयोग करने की आवश्यकता है, इसमें एक नज़र डालें।
जोड़ा लेखक Nick M, स्रोत
कोई चिंता नहीं, दोस्त। आशा है कि आप अपनी कोडिंग यात्रा जारी रखें! थैंक्सगिविंग की शुभकामनाएं!
जोड़ा लेखक Nick M, स्रोत

हो सकता है कि मूल बटन को छुपाने के लिए सीएसएस में मीडिया क्वेरी जोड़ने का प्रयास करें और दृश्य पोर्ट 480px या उससे कम होने पर एक्शन बटन पर कॉल जोड़ें।

0
जोड़ा
मेरे पास वास्तव में @media है और (अधिकतम-चौड़ाई: 480 पीएक्स) ... p.union-name के छिपाने को संभालने के लिए सेटअप है लेकिन कॉल टू एक्शन को अलग-अलग आकार के व्यूपोर्ट के तहत अलग-अलग व्यवहार करने की आवश्यकता है।
जोड़ा लेखक Berchman, स्रोत