奇怪jQuery的動畫行爲

網站使用這個做了一個「黑色的不透明性」過濾器：奇怪jQuery的動畫行爲

/* Body black hover */ 
    $(document).ready(function() { 
     $("#bg_hover").stop(); 
     $("#bg_hover").animate({ opacity: 0.5 }, 1000); 
     $("body").hover(function() { 
      $("#bg_hover").stop(); 
      $("#bg_hover").animate({ opacity: 0.5 }, 1000); 
     }, function() { 
      $("#bg_hover").stop(); 
      $("#bg_hover").animate({ opacity: 0 }, 1000); 
     }); 
    });

我的問題是，我想，當用戶進入到「SOBRE NOSALTRES」做一個小動畫（點擊上一級菜單進入該頁面）。你可以看到它的動畫「很好」，但根本沒有，有時如果你去「產品」並回到「SOBRE NOSALTRES」，動畫會被卡住在98％的寬度。這有點奇怪，爲什麼會發生？

這是錯誤的截圖： http://webkunst.comeze.com/test/3.png

，這是我使用，使NOSALTRES網頁上的動畫腳本：

<script> 
     $(document).ready(function() { 
      $("#bg_hover").stop(); 
      $("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800); 
      $('li#nosaltres').addClass('active') 
     }); 
     $("body").hover(function() { 
      $("#bg_hover").stop(); 
      $("#bg_hover").animate({ opacity: 0.9 }, 500); 
     }, function() { 
      $("#bg_hover").stop(); 
      $("#bg_hover").animate({ opacity: 0 }, 500); 
     }); 
    </script>

來源

2012-11-27 codek

你爲什麼把它標記爲AJAX？ – LorDex

我刪除了國旗 – codek

出現的問題，當你在<body>因爲你在$("body").hover(function() {});第一線停靠所有動畫，包括在減少寬度80%動畫調用$("#bg_hover").stop();懸停當PRODUCTES頁面加載。

我可以通過點擊SOBRE NOSALTRES來重現問題，然後將鼠標快速移入和移出瀏覽器窗口。

我不會將懸停效果添加到<body>，直到初始調整大小到80%完成爲止，例如通過在動畫完成後添加一個匿名函數來調用。

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() { 
    $('li#nosaltres').addClass('active'); 

    $("body").hover(function() { 
     $("#bg_hover").stop().animate({ opacity: 0.9 }, 500); 
    }, function() { 
     $("#bg_hover").stop().animate({ opacity: 0 }, 500); 
    }); 
});

來源

2012-11-27 10:04:47 andyb

這個修好了，謝謝！ – codek

不要把它分成兩行：\

$("#bg_hover").stop(); 
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

相反，使用：

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

來源

2012-11-27 09:50:56 LorDex

奇怪jQuery的動畫行爲

回答

相關問題