Blind在动画期间隐藏div [英] Blind hides div during animation

问题描述

我有以下内容： http://jsfiddle.net/4QF4C/14/ p>

为什么红色方块在动画期间隐藏在黑线后面，然后在完成后显示？如何解决此问题？

HTML：

 < div class =container> 
< div class =content> 
< div class =box-static> 
这是一个不受JQuery影响的静态框。 
< div class =dot>< / div> 
< / div> 
< div class =box> 
这只是一些文本。 
< div class =dot>< / div> 
< / div> 
< a href =＃>点击我！< / a> 
< / div> 
< / div> 
  

CSS：

 code> .container {
 width：900px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 .content {
 width：550px; 
 float：right; 
 border-left：5px solid black; 
 position：relative; 
 height：250px; 
} 
 
 .box-static {
 width：500px; 
 position：relative; 
 padding：12px; 
 margin：10px 0 0 17px; 
 background-color：lightgrey; 
 border：1px solid black; 
} 
 
 .dot {
 display：block; 
 position：absolute; 
 width：16px; 
 height：16px; 
 background-color：red; 
 top：50％; 
 left：-28px; 
 margin-top：-8px; 
} 
 
 .dot：after {
 content：; 
 display：block; 
 position：absolute; 
 width：8px; 
 height：8px; 
 background-color：white; 
 top：4px; 
 left：4px; 
} 
 
 .box {
 width：500px; 
 position：relative; 
 padding：12px; 
 margin：10px 0 0 17px; 
 background-color：lightgrey; 
 border：1px solid black; 
 display：none; 
} 
  

JQuery：

  $（'a'）click（function（）{
 $（box）。hide（）。show（blind）; 
 $（a）。hide（）; 
}）; 
  

请帮助！

解决方案

我认为这符合你的要求： http://jsfiddle.net/4QF4C / 32 /

基本上我所做的就是改变以下内容：

 code> .box {
 left：-11px; // Added 
 margin：10px 0 0 28px; //改变margin-left部分以添加11px 
 overflow：visible; //添加这个;不确定是否需要
} 
  

这使得 .box 展开以包括 .dot ，并在黑色线之上。

I have the following: http://jsfiddle.net/4QF4C/14/

Why does the red square hide behind the black line during the animation and then show after it's done? How can I fix this?

HTML:

<div class="container">
    <div class="content">  
        <div class="box-static">
            This is a static box that isn't effected by JQuery.
            <div class="dot"></div>
        </div>
        <div class="box">
            This is just some text.
            <div class="dot"></div>
        </div>
        <a href="#">Click Me!</a>
    </div>
</div>

CSS:

.container {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.content {
    width: 550px;
    float: right;
    border-left: 5px solid black;
    position: relative;
    height: 250px;
}

.box-static {
    width: 500px;
    position: relative;
    padding: 12px; 
    margin: 10px 0 0 17px;
    background-color: lightgrey;
    border: 1px solid black;
}

.dot {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: red;
    top: 50%;
    left: -28px;
    margin-top: -8px;
}

.dot:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    top: 4px;
    left: 4px;
}

.box {
    width: 500px;
    position: relative;
    padding: 12px; 
    margin: 10px 0 0 17px;
    background-color: lightgrey;
    border: 1px solid black;
    display: none;
}

JQuery:

$('a').click(function() {
    $(".box").hide().show("blind");
    $("a").hide();
});

Please help!

解决方案

I think this does what you're after: http://jsfiddle.net/4QF4C/32/

Basically all I did was change the following:

.box {
    left: -11px; // Added
    margin: 10px 0 0 28px; // Changed the margin-left portion to add 11px
    overflow: visible; // Added this; not sure if it's necessary
}

This makes the .box expand to include the .dot, and be over the black line.

这篇关于Blind在动画期间隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！