JQuery根據瀏覽器大小動畫onClick

我一直試圖解決下面的代碼幾周，但只是無法弄清楚什麼是錯的。當選擇圖標時，下面的菜單從左側滑入和滑出，它也像Facebook應用程序一樣向右移動元素。但是，根據瀏覽器的大小（頁面上的不同元素需要移動），我需要它稍有不同。它在文檔準備就緒時可以正常工作，但是當我調整瀏覽器大小時，它會嘗試多次滑入和滑出，並且不會根據大小進行正確的滑動功能。任何人都可以建議嗎？JQuery根據瀏覽器大小動畫onClick

var menuInitialized = false; 

function doMenu() { 

$(".c_left, .top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts, .myaccount, .header_logo").removeAttr('style'); 

var $menu = $(".c_left"); 
var width = $(window).width(); 
var status = 'closed'; 

if (width < 550) { 
    if (!menuInitialized) { 
     $('.icon-menu-2').on('click', function(event) { 
      alert('small'); //test which is being activated onclick 
      if (status === 'closed') { 
       $menu.animate({ 
        width: 185, 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .c_footer, .copyright, .accepts").animate({ 
        marginLeft: 185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount").animate({ 
        marginRight: -185, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'open'; 
      } else if (status === 'open') { 
       $menu.animate({ 
        width: 0, 
        marginLeft: -185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount,.c_footer, .copyright, .accepts").animate({ 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount").animate({ 
        marginRight: 0, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'closed'; 
      } 
     }); 
     menuInitialized = true; 
    } 
} else if ((width < 800) && (width > 550)) { 
    if (menuInitialized) { 
     $('.icon-menu-2').on('click', function(event) { 
      alert('large'); //test which is being activated onclick 
      if (status === 'closed') { 
       $menu.animate({ 
        width: 185, 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts").animate({ 
        marginLeft: 185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount, .header_logo").animate({ 
        marginRight: -185, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'open'; 
      } else if (status === 'open') { 
       $menu.animate({ 
        width: 0, 
        marginLeft: -185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .header_image,.c_footer, .copyright, .accepts").animate({ 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount, .header_logo").animate({ 
        marginRight: 0, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'closed'; 
       } 
      }); 
      menuInitialized = false; 
     } 
    } 
} 
$(document).ready(doMenu); 
$(window).resize(doMenu);

來源

2013-04-12 LeeTee

您可以製作小提琴嗎？ – Mooseman

我試圖做一個簡化版本在這裏：http://jsfiddle.net/cDppA/7/，但我甚至不能得到點擊功能工作 – LeeTee

我需要取消綁定點擊功能，即：$('.icon-menu').unbind('click');

來源

2013-04-15 11:13:37 LeeTee

事情是這樣的，也許：

var timeoutResize; 
$(window).resize(function(){ 
     clearTimeout(timeoutResize); 
     timeoutResize = setTimeout(doMenu,50); 

    });

來源

2013-04-12 15:00:15

謝謝，但它不工作。我已添加警報（'小' ）和警報（'大'）的代碼，以嘗試查看哪些.icon-menu-2'）。on（'click'，function（event）正在執行瀏覽器大小調整並且警報（小）文件準備就緒，即使在550px以上的時候警告「大」，警報仍然很小。 – LeeTee

烤的解決方案應該工作。在大多數瀏覽器中，resize事件在窗口大小調整時不斷激發。根據您在處理程序中所做的操作，您可能需要在執行處理程序代碼之前引入延遲來等待調整大小完成。

來源

2013-04-12 15:18:33 bstonehill

JQuery根據瀏覽器大小動畫onClick

回答

相關問題