Question

当鼠标悬停在拇指大小的图像上时，我想显示图像实际视图。但是当鼠标放在第一个图像上时会出现然后消失，而不是第二个和后续图像的情况。

它在Internet Explorer中运行得很好，但在Firefox或Chrome中却不行。

$file - runs displays all the files in a directory
$id_v - is a simple count on the number of files
$path1 - is the path

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#view').hide();

            $('#ig<? echo $id_v; ?>').bind('mouseover', function(ev) {
                 $('#view').slideDown();
                $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
            });

            $('#ig<? echo $id_v; ?>').bind('mouseout', function(ev){
                $('#view').slideUp();
            });
        });
    </script>

Answer 1

请注意，我对您的HTML的解释可能完全错误。请将您的问题发布在所有相关代码中。 - 帮助我们，帮助您。：运算

请注意（如果您不知道）您可以编辑您的问题以使用相关信息进行更新。

如果没有看到HTML，就无法肯定地说，但请考虑以下因素：

$('#view').hide();

这里'view'是一个id。 ID必须是唯一的。您不能将它们分配给多个元素。

我假设您想要制作动画的每个项目在HTML中获得id='view'，当您在javascript中使用以下内容在HTML中执行class='view'时：

$('.view').hide()
etc...

试一试。

Answer 2

如果没有实例，很难说（对我来说）......

你有没有尝试过：

预加载图像（使用css 技术或预加载jQuery 插件）？
更改鼠标悬停/鼠标移除 mouseenter / mouseleave？

仅供参考，在jQuery 1.4中，您可以使用多个事件。所以你的代码可以像这样重写：

$('#ig<? echo $id_v; ?>').bind({
  mouseover: function() {
    $('#view').slideDown(); 
    $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
  },
  mouseout: function() {
    $('#view').slideUp();
  }
});

Answer 3

可能会有很多事情。

如果图像#view被修复或显示在缩略图的位置上，则会在您出现的那一刻在缩略图中触发鼠标输出。

另一件可能导致#view瞬间隐藏的事情是，#view元素会修改整个文档的位置，如果它位于顶部或类似的东西。尝试删除mouseout绑定并使用Internet Explorer加载页面，并查看文档的修改方式。

Answer 4

我建议使用悬停方法而不是mouseover和mouseout：

<script language="javascript" type="text/javascript">
    $(function() {
        $('#view').hide();

        $('#ig<? echo $id_v; ?>').bind('hover', 
            // over
            function() {
                $('#view').slideDown(); 
                $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
            },

            // out
            function() {
                $('#view').slideUp();
            }
        ); 
    });
</script>

我还建议（为了让您的生活更轻松一点），而不是将新方法绑定到每个新ID，只需为每个新ID分配一个类并使用

<script language="javascript" type="text/javascript">
$(function() {
    $('#view').hide();

    $('.some-class').hover( 
        // over
        function() {
            $('#view').slideDown(); 
            $("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
        },

        // out
        function() {
            $('#view').slideUp();
        }
    ); 
});
</script>

这个简单的jQuery slideUp和slideDown有什么问题？

4 个答案: