我正在设计一个可以选择某些对象的UI。执行此操作时,将滑出信息窗格。一切都很好,除非你在我希望动画再次运行的项目之间切换。
以下是完整的代码:http://codepen.io/ScottBeeson/pen/JGyDa
以下是相关的CSS:
#info.show {
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
以下是相关的JS:
$('#items div').on('click', function() {
$('#info').removeClass('show').addClass('show').html('Box ' + $(this).html() + ' is selected')
})
答案 0 :(得分:1)
看起来删除类不会导致首先隐藏div,如预期的那样。您可以尝试使用setTimeout
在onclick
事件处理程序之外添加类(删除类之后):
$('#items div').on('click', function() {
$('#info').removeClass('show');
setTimeout(function(){
$('#info').addClass('show')
.html('Box ' + $(this).html() + ' is selected')
}.bind(this),1);
})
某些旧浏览器可能不支持bind
方法,请尝试使用jQuery的$.proxy
方法,而不是 Demo 。
答案 1 :(得分:0)
<强> jsBin demo 强>
<div id="info">Box ? is selected</div>
<div id="items">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#items div {
position: relative;
width: 50px;
height: 50px;
border: 1px solid blue;
margin: 10px;
text-align: center;
line-height: 50px;
}
#info {
position:fixed;
z-index:2;
width:100%;
top:-50px;
left:0;
background:gold;
padding:5px 0;
overflow: hidden;
text-align: center;
color: blue;
}
var $info = $('#info'), // Cache your elements you plan to reuse over and over.
infoOrgTop = parseInt( $info.css('top'), 10 ), // Get org top position
infoTimeout = null; // Timeout to hide Info bar
function showinfo() {
clearTimeout(infoTimeout); // Don't hide if we clicked another item
$info.text( "Box "+ $(this).text() +" is selected" );
$info.stop(0,1).animate({top: 0}, 400);
infoTimeout = setTimeout(function(){
$info.animate({top: infoOrgTop});
}, 2000); // hide annoying gold bar after 2s
}
$('#items div').on('click', showinfo);
答案 2 :(得分:0)
这是代码 -
CSS -
#info {
position: absolute;
left: 75px; top: 0px;
width: 200px;
overflow: hidden;
text-align: center;
padding: 0px;
background-color: yellow;
color: blue;
display:none;
}
JQUERY -
$('#items div').on('click', function() {
$('#info').hide();
$('#info').slideDown(500).html('Box ' + $(this).html() + ' is selected')
});