javascript - jQuery onClick 必须导致间歇性显示 或图像

Question

我希望我网站的用户能够点击图像或 div，这将引起元素的间歇性显示。以下方式 ( http://goo.gl/7uk7i5 ) 的一种类似频闪的效果，只是我希望隐藏此元素，从而显示其下方的内容。

我从过去的 SO 线程中获得了这种效果的灵感:http://goo.gl/ks0oJN .所以这里的问题是:当悬停在元素上和/或单击元素时，我可以实际控制闪烁吗？也许使用一些 jQuery 或 Javascripting？

理想情况下，代码将允许用户对闪烁进行一些控制。即一次点击，导致一定的速度；两次点击，另一种速度；第三次点击，返回静态显示。

感谢您的帮助。

Answer 1

如果我对您的问题的理解正确，那么您想要控制您的 fiddle 所展示的闪烁效果。简短的回答是否定的。

此效果是由 :hover 的工作方式引起的，它会更新鼠标移动的每个像素。你已经赋予了悬停效果 visibility:hidden 所以当你悬停在元素上时它会折叠，但现在你不再悬停在它上面，所以 :hover 没有不再适用。这反射(reflect)在再次显示完整元素的下一个像素上。

此问题的解决方案在 fiddle demo 中

编辑您无法通过 CSS 控制它，但请看下面，看看它是否适合您。

Working Demo

HTML:

 <div class="vis-1">
    <div>
        Lorem Ipsum
    </div>
</div>

CSS:

body > div {
    height:100px;
    width:100px;
    margin-bottom: 15px;
}
.vis-1 div {
    height:inherit;
    width:inherit;
    background: lightblue;
}

JS:

$('.vis-1').hover(
    function () {
        (function flicker () {
            $('.vis-1 div').fadeIn(10).delay(50).fadeOut(10);

            flickerTimer = setTimeout(function () {
                flicker();
            }, 100);
        })();
    }, function () {
        clearInterval(flickerTimer);
        $('.vis-1 div').stop(true,true).fadeIn(10);
    }
);