如何使用动画突出显示 HTML 块元素或淡出页面的其余部分

我刚刚开始构建一个网页帮助（突出显示+教程步骤）jQuery插件。您可以在此处查看最新结果。

http://goo.gl/ZZ2xy

我第一次尝试突出显示是有 4 个覆盖div，它们只是通过 css 过渡移动。这很简单，但并不完美。它至少在 Chrome 中在叠加元素之间创建空间线。

创建此动画的最佳方法是什么？

我有更好的解决方案。这是一个概念的实践，肯定需要调整，但总的来说它是有效的。这个想法是使用表 3x3 作为叠加层，对所有单元格使用半透明背景，除了一个假设用作您查看目标 html 元素的窗口

的单元格。

我想浏览器可能存在一些怪癖（可能是可修复的），但它仍然比您现在使用的浏览器更干净、更好。

此处提供了示例代码 http://jsbin.com/ekijev/4

使用jQuery .css（）方法正确改进了很多。有时仍然是一条白线，但对我来说没关系。一切都准备好在github上更新。

老：

$elem.css({"left" : x})
   .css({"top" : y}) 
   .width(width)
   .height(height);

新增功能

$elem.css({
            "left" : x,
            "top" : y,
            "width" : width,
            "height" : height
});

所以我有一个适合你的淡入淡出解决方案。只是基础知识，但应该足以帮助您。

只需将代码粘贴到记事本文件中即可保存并运行

代码已更新

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
    DIV{
        width:200px;
        height:200px;
        display:inline-block;
    }
    .black{
        background:black;
    }
    .yellow{
        background:yellow;
    }
    .red{
        background:red;
    }
    .green{
        background:green;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="1" class="yellow"></div>
        <div id="2" class="black"></div>
        <div id="3" class="red"></div>
        <div id="4" class="green"></div>
    </div>
</body>
<script>
    $(document).ready( function (){
        var target = 2;//id of element we dont want faded
        var pageElements = $('#container').find('*').toArray();//get all elements in our container
        for(var counter = 0; counter < pageElements.length;counter++){//itterate through them
            if(pageElements[counter].id != target){//if element is not our target fade
                $(pageElements[counter]).fadeOut("slow",OnFadeComplete);//fade
            }
        }
    });
    function OnFadeComplete(){
        $(this).attr('style','visibility:hidden;');
    }
</script>

相关内容

最新更新

热门标签：