JQuery id測試失敗，動畫系統與單獨的div

我想在屏幕中間做一個4格的新菜單，當你將鼠標懸停在它們放大的方塊上時，每個方向都是不同的方向它們不重疊。我已經有了動畫部分和基本部分，唯一的事情是，我如何讓他們在不同的方向移動？我已經通過添加if語句解決了這個問題，該語句獲取元素的id並使用它來找出方塊所在的位置。但是，這個陳述失敗了，我認爲在它檢查id的部分。我可以用一些幫助來解決它，因爲我基本上都試過一切來使它工作。提前致謝！JQuery id測試失敗，動畫系統與單獨的div

這裏的的jsfiddle與工作動畫：https://jsfiddle.net/2qkv1xua/ 這是同樣的jsfiddle，但有一個附加的if語句：https://jsfiddle.net/2qkv1xua/1/

當然代碼：

[HTML]

<body> 
    <div id="menu_holder"> 
     <div class="menuItem" id="menu_item_1"></div> 
     <div class="menuItem" id="menu_item_2"></div> 
     <div class="menuItem" id="menu_item_3"></div> 
     <div class="menuItem" id="menu_item_4"></div> 
    </div> 
</body>

[CSS]

* { 
    margin: 0 auto; 
    padding: 0; 
} 
#menu_holder { 
    position: absolute; 
    width: 410px; 
    height: 410px; 
    margin: 0; 
    padding: 105px; 
    top: calc(50% - 305px); 
    left: calc(50% - 305px); 
} 
.menuItem { 
    width: 200px; 
    height: 200px; 
    float: left; 
} 
#menu_item_1 { 
    margin: 0px 5px 5px 0px; 
    background-color: rgb(190, 184, 235); 
} 
#menu_item_2 { 
    margin: 0px 0px 5px 5px; 
    background-color: rgb(139, 157, 195); 
} 
#menu_item_3 { 
    margin: 5px 5px 0px 0px; 
    background-color: rgb(82, 153, 211); 
} 
#menu_item_4 { 
    margin: 5px 0px 0px 5px; 
    background-color: rgb(11, 85, 99); 
}

[JS]

$(document).ready(function() { 
    $('.menuItem').hover(
     if (this.attr('id') == "#menu_item_1") { 
      function() { 
       $(this).filter(':not(:animated)').animate({ 
        width: "300px", 
        height: "300px", 
        marginTop: "-100px", 
        marginLeft: "-100px" 
       }); 
      }, 
      function() { 
       $(this).animate({ 
        width: "200px", 
        height: "200px", 
        marginTop: "0", 
        marginLeft: "0" 
       }); 
      } 
     }); 
});

來源

2015-07-11 YSbakker

您還可以爲每個項目指定懸停處理程序... $（'＃menu_item_1'）。hover（...）;爲每個項目添加一個自定義動畫。但是，如果展開menu_item_2的寬度和marginRight，則會遇到在menu_holder中重新排列項目的問題。 –

@JohnSheridan玩了一下，原來我沒有重新安排問題（？）。這並不是最好的方法，但它絕對可以用盡可能少的HTML。所以謝謝你的建議！ – YSbakker

試試看看這個代碼。它的工作。

 $(document).ready(function() { 
      $('.menuItem').hover(function(){ 

      if ($(this).attr('id') == "menu_item_1") { 
        $(this).filter(':not(:animated)').animate({ 
         width: "300px", 
         height: "300px", 
         marginTop: "-100px", 
         marginLeft: "-100px" 
        }); 


        $(this).animate({ 
         width: "200px", 
         height: "200px", 
         marginTop: "0", 
         marginLeft: "0" 
        }); 
      } 
      }); 
     });

來源

2015-07-11 13:31:25 vel

是的，它有用，但在我盤旋在廣場後，它會恢復到原來的狀態。這可能是由於它不是一個功能所致。此外，當懸停在框外時，它將再次執行動畫。 – YSbakker

隨着各地各MENU_ITEM一切絕對定位的包裝，你可以做這樣的：

<div id="menu_holder"> 
    <div class="menuWrapper" id="menu_wrapper_1"><div class="menuItem" id="menu_item_1"></div></div> 
    <div class="menuWrapper" id="menu_wrapper_2"><div class="menuItem" id="menu_item_2"></div></div> 
    <div class="menuWrapper" id="menu_wrapper_3"><div class="menuItem" id="menu_item_3"></div></div> 
    <div class="menuWrapper" id="menu_wrapper_4"><div class="menuItem" id="menu_item_4"></div></div> 
</div>

* { 
    margin: 0 auto; 
    padding: 0; 
} 
#menu_holder { 
    position: absolute; 
    width: 180px; 
    height: 180px; 
    left: 10px; 
    top: 10px; 
    border: 1px dashed #999; 
} 
.menuWrapper { 
    position: absolute; 
    width: 87px; 
    height: 87px; 
} 
#menu_wrapper_1 { 
    left: 0; 
    top: 0; 
} 
#menu_wrapper_2 { 
    right: 0; 
    top: 0; 
} 
#menu_wrapper_3 { 
    left: 0; 
    bottom: 0; 
} 
#menu_wrapper_4 { 
    right: 0; 
    bottom: 0; 
} 
.menuItem { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
} 
#menu_item_1 { 
    background-color: rgb(190, 184, 235); 
    right: 0; 
    bottom: 0; 
} 
#menu_item_2 { 
    background-color: rgb(139, 157, 195); 
    left: 0; 
    bottom: 0; 
} 
#menu_item_3 { 
    background-color: rgb(82, 153, 211); 
    right: 0; 
    top: 0; 
} 
#menu_item_4 { 
    background-color: rgb(11, 85, 99); 
    left: 0; 
    top: 0; 
}

$(document).ready(function() { 
    $('.menuItem').hover(function() { 
     $(this).stop().animate({ 
      width: "80px", 
      height: "80px" 
     }); 
    }, function() { 
     $(this).stop().animate({ 
      width: "50px", 
      height: "50px" 
     }); 
    }); 
});

我減少大小，以使在小演示更好小提琴框

DEMO

來源

2015-07-11 15:41:52

不錯！非常感謝你的努力。我發現它實際上工作正常，但我不喜歡它使用包裝來完成它的方式。通過使用邊距是否真的沒有辦法做到這一點？ >>請不要誤解我的意思，我非常感謝您的努力，我會毫不猶豫地利用您的代碼。我還用'.filter（'：not（：animated）'）'改變了第一個'.stop（）'，這樣就完成了整個動畫。我只是喜歡它。 – YSbakker

是的，但CSS變得更加複雜。你失去了top的簡單性：0，left：0，bottom：0，right：0。也許這不會太壞，但個人而言，我會與包裝紙一起生活 - 開銷很小。 –

JQuery id測試失敗，動畫系統與單獨的div

回答

相關問題