Div Transitions - IE与其他人

Question

我有一个显示一系列框的JSFiddle。如果单击其中一个框，则会展开以覆盖其他框，然后显示文本。单击现在展开的框时，它将缩回到其原始宽度和高度。这个javascript在Firefox，Chrome和Safari中完美运行。但是，在Internet Explorer（v10）中，该框会展开但无法撤消。任何关于为什么会这样的洞察力？

JSFiddle：http://jsfiddle.net/QBdDE/

Javascript：

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});

Answer 1

正在进行什么

问题：

在IE11中添加了

pointer-events支持。 IE10忽略了这一点，因为你的叠加层位于顶部，鼠标正在与它进行交互。我们可以解决这个问题！

解决方案：

我们需要删除对该CSS规则的依赖。要做到这一点，我们需要做两件事：

1。）即使:hover效果没有发生，我们也需要保持悬停颜色。我们可以在CSS中添加另一个选择器，这样.clicked类就会产生颜色。

2。）我们需要解决点击.overlay_text时发生的情况，并使用它来触发缩小的动画。

---

代码

1.。悬停效果

我们需要在每个地方添加另一个选择:hover：

旧CSS：

.first_box:hover {

   ...background color rule ...

}

新CSS：

.first_box:hover, .first_box.clicked {

   ...background color rule ...

}

对所有4个盒子规则复制以上内容。

2。）.overlay-text触发

我们需要点击.overlay-text才能触发萎缩。

旧JS：

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});

新JS：

我们必须为.on()代码添加新的选择器，然后我们必须将.clicked添加到所选的方块，添加覆盖的部分。最后，我们必须从两者中删除.clicked。我们无法使用.toggleClass()，因为我们正在添加$(this)并从所有div中删除。

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

---

摘要

我已经在IE10中进行过测试，但它确实有效。

工作示例：

---

附加

如果我可以说，你正在使用的CSS结构可以改进，你的动画看起来会好很多。在两个左侧块的动画期间，Chrome和IE都会闪烁。

这是因为它们的宽度和位置正在动画化。如果你从right:0定位它们，只有它们的宽度会动画，它看起来会更平滑。

我为你创造了一个小提琴来解决上述问题。我用绝对定位。 CSS最终变短了，但主要是动画不会闪烁。看看：

工作示例：

额外2

根据OP的评论，我们将阻止用户双击。由于所有动画都需要1秒钟，因此我们将在每次点击后禁用点击触发任何内容1秒钟。

实际上这很简单。在上面的Extra 1中，我们清理了JS，它变成了这个：

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

我们只需要添加一个开始为true的全局变量。一旦发生单击，立即将其设置为false，并在1秒后将其设置为true。然后我们只是检查它是否属实，如果它是假的则不做任何事情：

var notdouble = 1;
$('div, .overlay-text').on('click', function (e) {
    if (notdouble) {
        if ($(this).hasClass('clicked')) {
           $('.overlay-text').hide();
           $('div').removeClass('clicked');
           $('.overlay-text').removeClass('clicked');
        }
        else {
            setTimeout(function(){$('.overlay-text').show();},1000);
            $(this).addClass('clicked');
            $('.overlay-text').addClass('clicked');
        }
        notdouble=0;
        setTimeout(function(){notdouble=1;},1000);
    }
});

工作示例：

请注意，这是根据Fiddle版本13中的新结构构建的，因此它不能完全与原始结构的固定版本一起使用。这个概念可以改编。

Answer 2

不能在IE 9中工作，因为div点击事件永远不会触发。我认为这部分涵盖了class =＆＃34; overlay-text＆＃34;。但我通过处理该部分的click事件并触发div click事件得到了解决方法

$('section').on('click', function (e) { 
    $('.overlay-text').hide();
    $( "div" ).addClass('clicked') ;
    $( "div" ).trigger( "click" );
});