当我单击该链接时,我想附加并淡入另一个元素。
问题是元素淡入,很快淡出,然后又淡入。
您可以在这里看到:http://jsfiddle.net/yfae3y11/1/
HTML
<div id="boxpms">
<a class="pms" href="#" title="0 messages" >click
<span id='pms_number' >0</span></a>
</div>
jquery
$('.pms').click(function(e){
$('<div id=\'messages_box\'><ul><li>test</li></ul></div>').hide().appendTo('#boxpms').fadeIn('slow');
e.preventDefault();
});
CSS 包含在 fiddle 中。
如何在没有这种效果的情况下制作一个漂亮的淡入效果?
最佳答案
这是因为 CSS 过渡与 jQuery 效果一起使用。
删除这部分CSS样式,解决问题:
-webkit-transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
transition: 0.2s ease-out;
-webkit-transition-property: opacity, padding, visibility;
-moz-transition-property: opacity, padding, visibility;
-o-transition-property: opacity, padding, visibility;
transition-property: opacity, padding, visibility;
$('.pms').click(function(e) {
$('<div id=\'messages_box\'><ul><li>test</li></ul></div>').hide().appendTo('#boxpms').fadeIn('slow');
e.preventDefault();
});
#boxpms {
position: relative;
display: inline;
}
#pms_number {
position: absolute;
margin-left: -11px;
font-size: 13px;
margin-top: -4px;
color: white;
}
#messages_box {
display: table;
z-index: 1001;
position: absolute;
top: 28px;
background: #FFFFFF;
border: 1px solid;
border-color: #777 #6c6c6c #666;
border-radius: 5px;
transition-property: opacity, padding, visibility;
background-image: -webkit-linear-gradient(top, #FFFFFF, #FFFFFF);
background-image: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background-image: -o-linear-gradient(top, #FFFFFF, #FFFFFF);
background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 8px 12px 8px 8px;
vertical-align: baseline;
zoom: 1;
}
#messages_box {
left: -9px;
}
ol,
ul {
list-style: none;
}
#messages_box ul:before {
bottom: 27px;
border-top: 7px solid #555;
}
#messages_box ul:before,
#messages_box ul:after,
#messages_box li:first-child:after {
content: '';
display: block;
position: absolute;
left: 10px;
width: 0;
height: 0;
border: 7px outset transparent;
transform: rotate(180deg);
top: -13px;
}
#messages_box ul:after {
bottom: 27px;
border-top: 7px solid #d9e3fa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpms">
<a class="pms" href="#" title="0 messages">click
<span id='pms_number' >0</span></a>
</div>
关于Jquery 使用 fadeIn() 产生奇怪的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26328773/