基於視口大小的jQuery懸停動畫

Question

在學習更多jQuery的過程中遇到了一些代碼問題。 當用戶將鼠標懸停在特定元素上時，我正在嘗試制作動畫效果（fadeIn / fadeOut）。

但是，當調整視口大小時（例如，在移動顯示中調整為480px以下）時，我需要將懸停效果忽略，僅顯示號召性用語。 在下面的代碼中，我嘗試檢測視口，然后通過if-then-else語句應用適當的腳本。

我懷疑我沒有正確地嵌套東西或分號放錯了位置。 我凝視了一段時間，被困住了。

我確實將這些其他帖子作為參考。

• http://j.mp/1hejP0B
• http://j.mp/1hejRFK

如果您有任何疑問或可以提供其他詳細信息，請告訴我。

// 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();
});

Answer 1

也許嘗試在CSS中添加媒體查詢以隱藏原始按鈕，並在視口小於或等於480px時添加號召性用語按鈕。

Answer 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();
});