.animate（）或.click（）函數在Firefox中不起作用

我有一個fullScreen()函數，該函數通過將div的CSS左屬性操作爲0或-100％，可用於Chrome和Microsoft Edge。這裏是jQuery的：.animate（）或.click（）函數在Firefox中不起作用

var fullScreen = function() { 
    $('#fullscreenbutton').click(function() { 
     $('.dashboard').animate({ 
      left: "-100%" 
     }, 200); 
    }); 
    $('#hamburgerbutton').click(function() { 
     $('.dashboard').animate({ 
      left: "0" 
     }, 200); 
    }); 
}

HTML：

<div class="wrapper"> 
    <div class="dashboard"> 
     <div class="navtools"> 
      <ul> 
       <li id="searchli"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><span class=" glyphicon glyphicon-search" aria-hidden="true" style="font-size: 22px;"></span></span> 
         <input type="text" class="form-control" placeholder="Search..." aria-describedby="basic-addon1"> 
        </div> 
       </li> 
       <li id="findmebutton"><span class=" glyphicon glyphicon-globe" aria-hidden="true" style="font-size: 22px;"></span> <p>Find Me</p></li> 
       <li><span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size: 22px;"></span> <p>Favorite</p></li> 
       <li><span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true" style="font-size: 22px;"></span> <%= link_to ' Back ', root_path, :class => 'none' %> </li> 
       <li id="fullscreenbutton"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true" style="font-size: 22px;color: #2A83C6"></span> <p>Full Screen</p></li> 
      </ul> 
     </div> 
    </div> 
    <div id='myMap' oncontextmenu="return false"> 
     <div class="hamburgerbutton"> 
      <span class="glyphicon glyphicon-menu-hamburger" id="hamburgerbutton" aria-hidden="true" style="font-size: 50px;"></span> 
     </div> 
     <div class="alert alert-info"> 
      <a href="#" class="close" style="padding-left: 10px" data-dismiss="alert" aria-label="close">&times;</a> 
      <strong>Hey!</strong> Right-click or hold to add a location. 
     </div> 
    </div> 
</div>

在正確的方向任何建議或點？

來源

2016-01-25 alecs36

是誰喊'fullScreen' –

對不起阿朗，我對這個問題感到困惑。任何用戶在點擊「#fullscreenbutton」時都會調用fullScreen，它只是一個li項目。單擊li項時，絕對定位在Bing地圖上的.dashboard div會在屏幕外向左移動-100％（在Chrome和IE上）。然後，將儀表板重新放回到屏幕上，用戶點擊#hamburgerbutton，我相信這只是一個圖像，我放置在必應地圖的絕對位置左上角。 – alecs36

我在原始問題中包含了HTML。 – alecs36

而不是在函數調用綁定，這樣做綁定在DOM已準備就緒塊，它可以簡化爲：

$(function(){ 
     $('#fullscreenbutton, #hamburgerbutton').click(function(){   
      $('.dashboard').animate({ 
        left: this.id === 'fullscreenbutton' ? "-100%" : "0" 
      }, 200); 
     }); 
    });

來源

2016-01-25 05:06:25 Jai

謝謝Jai！這似乎工作。你能解釋爲什麼這與我創建的功能不同或更好嗎？我想更好地理解爲什麼這與我的解決方案相比起作用。 – alecs36

@ alecs36任何人都不應該在函數調用中綁定事件。當你調用該函數時，它會綁定新的事件。這與之類似，你有一個函數中的綁定，並在DOM就緒事件中調用該函數。所以，不要這樣做，它應該在dom ready塊中完成。 – Jai

.animate（）或.click（）函數在Firefox中不起作用

回答

相關問題