jQuery .animate 在 IE8（不是 IE7）中移动多个 div答案

【问题标题】：jQuery .animate moves multiple divs in IE8 (not IE7)jQuery .animate 在 IE8（不是 IE7）中移动多个 div
【发布时间】：2011-09-06 18:13:39
【问题描述】：

我正在使用 jQuery .animate 在表格旁边滑动一个 div，因为触发了窗口滚动。该功能在 Firefox、Chrome 和 IE7 中正常运行，但在 IE8 中不可用。

在 IE8 中，滑动的 div 和表格都在 window.scroll 上移动。

可以在此处查看正确功能的示例： http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/

jQuery

var $scrollingDiv = $("#hover_sidebar");
$(window).scroll(function(){
    $scrollingDiv
        .stop()
        .animate({"marginTop": ($(window).scrollTop() - 100) + "px"}, "slow" );
});

HTML

<div class="grid_7 alpha" >
    <table id="protocol_index">
        <thead>
        <tr id="protocol_index_header">
            <th>Protocol Name</th>
            <th>Maximally defined<br/> refill period</th>
            <th>Non-integrated <br/>Usability Index <%= image_tag "help.png", :id  => "usability_index", :size  => "21x21" %></th>
        </tr>
        </thead>
        <tbody>
        <% @protocol_sets.each do |set| %>
        <tr class="<%= cycle("even", "odd") %> <%= set.name.gsub(" ", "_") %> row">             
            <td><%= link_to set.name, set %></td>
            <% if set.workflow_nodes.find_by_name("ActionYes").refill_time > set.workflow_nodes.find_by_name("ActionNo").refill_time %>
            <td><%= set.workflow_nodes.find_by_name("ActionYes").refill_time %></td>
            <% elsif set.workflow_nodes.find_by_name("ActionYes").refill_time < set.workflow_nodes.find_by_name("ActionNo").refill_time %>
            <td><%= set.workflow_nodes.find_by_name("ActionNo").refill_time %></td>
            <% else %>
            <td><%= set.workflow_nodes.find_by_name("ActionYes").refill_time %></td>
            <% end %>

            <% if set.complexity > 30 %>
            <td class="poor_usability">Poor
            <% elsif set.complexity <= 30 && set.complexity >= 20 %>
            <td class="medium_usability">Medium
            <% elsif set.complexity < 20 %>
            <td class="good_usability">Good
            <% end %>
            </td>
        </tr>
        <% end %>
        </tbody>
    </table>
</div>
<div id="hover_sidebar" class="grid_5 omega">
    <h5>Medication classes</h5>
    <p id="no_protocol_hover">(Hover on a protocol to view its medication classes)</p>
    <% @protocol_sets.each do |set|%>
    <ol class="<%= set.name.gsub(" ", "_") %>">
        <% if set.name == "General"%>
            <li><p>All Other Medications Not Covered</p></li>
        <% end %>
        <% set.med_classes.each do |med|%> 
            <li><p><%= "#{med.name.split(" ").each{|word| word.capitalize!}.join(" ")}" %></p></li>
            <%# If you want medications that are within each class uncomment the following three lines %>
            <%# med.medications.each do |m| %>
                <%# m.name %>
            <%# end %>
        <% end %>
    </ol>
    <% end %>
</div>

【问题讨论】：

您的链接页面对我来说在 IE8 中运行良好。
不确定 ie8 但它在 ie9 中工作
是的，该链接也适用于我。那是我找到的一些示例代码。使用相同的代码在我的应用程序版本中不起作用。

标签： jquery internet-explorer internet-explorer-8

【解决方案1】：

我已经看到 IE8 在影响意外元素的边距周围有奇怪的行为。试试这个：

在您的 CSS 中为 #hover_sidebar 设置 position: relative;
动画top 属性而不是marginTop

【讨论】：