Question

我有一个泡泡盒，显示2个案例：

悬停时（马上，没有动画）
页面加载后5秒（除非用户已经悬停它），它也会在5秒后消失。在这种情况下，它也会有X关闭按钮。

如果是＃2，我希望它以淡入/淡出动画显示/消失（也适用于X按钮）。

我尝试使用Jquery制作动画，使用opacity更改而不是display:block/none，（请参阅jquery中的注释代码）并相应地修改CSS以使opacity:0和{ {1}}代替display:block。

然而，一旦我做了这个修改，气泡将不再适用于＃1，因为它已经“显示”但是不透明度为“。”

解决这一切的最佳做法是什么？也许我不应该在Jquery中制作动画，而是使用一些CSS3效果，但我也无法让它正常工作。

HTML：

none

CSS：

<div style="width:300px;margin-left: 200px;">
<span class="st-help parent-span" >
  <div class="cta-wrapper">                         
      <div class="button-like">Hover me for info
        <div class="st-help-text st-cta">
        bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
        </div>        
    </div>
  </div>           
</span>
<span id="buttonx" class="buttonx">X</span>
</div>

Jquery的：

.st-help {
    position: relative;
    cursor: help
}

.st-help .st-help-text {
    display: none;/**/
    background-color: #FDFCEF;
    border: 1px solid #E8E5C1;
    border-radius: 4px;
    color: #333;
    padding: 5px;
    white-space: normal;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 7px);
    line-height: 1.2;
    text-align: left

    /*   opacity:0;*/
}

.st-help .st-help-text:after,
.st-help .st-help-text:before {
    bottom: 100%;
    left: 55%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.st-help .st-help-text:after {
    border-color: transparent transparent #FDFCEF;
    border-width: 8px;
    margin-left: -8px
}

.st-help .st-help-text:before {
    border-color: transition transition #E8E5C1;
    border-width: 10px;
    margin-left: -10px;
    border-bottom-color: #E8E5C1
}

.st-help:hover .st-help-text {
    display: block!important

}

.st-help-text {
    width: 185px

}




.st-help .st-cta {
    padding: 7px;
    left: -20px;
    top: calc(100% + 9px);
    font-size: 13px
}

.st-cta {
    width: 255px
}

.parent-span .cta-wrapper {
    margin-bottom: 19px;
    display: inline-block
}

.button-like:hover {
    background-color: #aaa!important
}

.button-like {
    color: #fff;
    background-color: #f07c00;
    -webkit-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: inherit;
    font-family: 'Open Sans', arial;
    font-size: 13px;
    padding: .4em 2.1em .4em .5em;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: -.01em
}

.st-help .st-cta {
    left: -50px;
    top: calc(100% + 14px)
}

.buttonx {
    position: relative;
    float: right;
    border-width: 0px;
    background-color: transparent;
    display: none; /**/
    cursor: pointer;
    top: 52px;
    left: 6px;
    color: #a2a087;
    font-size: 1.1em;

/*   opacity:0;*/

}

P.S，如果我对气泡框使用淡入淡出效果，我还希望var flag = true; $(".button-like").hover(function(){ flag = false; }) $( document ).ready(function() { setTimeout(function() { if(flag) { $( ".st-help-text" ).css( "display", "block" ); // $(".st-help-text").animate({opacity:1},1000); $(".button-like").css("background-color", "#aaa"); $('#buttonx').css("display","block"); // $('#buttonx').animate({opacity:1},1000); setTimeout(function() { $( ".st-help-text" ).css( "display", "none" ); //$(".st-help-text").animate({opacity:0},1000); $('#buttonx').css("display","none"); //$('#buttonx').animate({opacity:0},1000); $(".button-like").css("background-color", "#f07c00"); }, 4000); } }, 3000); }); $( "#buttonx" ).click(function() { $( ".st-help-text" ).css( "display", "none" ); $('#buttonx').css("display","none"); $(".button-like").css("background-color", "#f07c00"); });更改回button-like转换。

淡化元素的动画，除非处于悬停状态

0 个答案: