Question

我正在使用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>

Answer 1

我已经看到IE8在边缘上有奇怪的行为影响了意料之外的元素。试试这个：

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

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

1 个答案: