jQuery动画不能正常工作
jQuery animate not working properly
我正在尝试使用jQuery动画内容。但不能正常工作
下面是一个jsFiddle的例子:https://jsfiddle.net/oLt5uwz3/
我不想使用任何height
或jQuery slideUp()/slideDown()
.
我想自动移动内容的每个内容高度时,鼠标离开。在这个例子中,当我点击?
和鼠标离开快速然后动画不正常工作。
$('.open').click(function(){
$('.lists').slideToggle(); });
$('.next').click(function(){
$('.tip2').fadeIn();
$('.tip1').hide(); });
$('.prev').click(function(){
$('.tip2').hide();
$('.tip1').fadeIn(); });
$(function(){
$('.div').css('bottom','-'+$(".div").outerHeight()+'px'); });
$('.hover, .height').on('mouseenter',function(){
$('.div').stop().animate({bottom:'0px'},'slow'); });
$('.hover, .height').on('mouseleave',function(){
$('.div').stop().animate({bottom:'-'+$(".height").outerHeight()+'px'},'slow');});
.div {background:black;width:350px;position:fixed;bottom:0;right:0}
.hover {padding:2px;text-align:center;border-bottom:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:15%;display:inline-block;position:absolute;margin-top:-19px}
.tip1 {background:black;color:white;padding:5px}
.tip2 {display:none;background:black;color:white;padding:5px}
.prev, .next {text-align:center;border:1px solid #ccc;font-size:20px;color:white;cursor:pointer;background:black;width:35%;display:inline-block}
.open {padding:2px;text-align:center;border:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:22.8%;display:inline-block}
.lists {display:none;background:black;color:white;padding:5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div">
<div class="hover">Hover</div>
<div class="height">
<div class="tip1">MacBook now comes with 1GB of memory standard and larger hard drives for the entire line perfect for running more of your favorite applications and storing growing media collections.</div>
<div class="tip2">iPhone is a revolutionary new mobile phone that allows you to make a call by simply tapping a name or number in your address book, a favorites list, or a call log. It also automatically syncs all your contacts from a PC, Mac, or Internet service. And it lets you select and listen to voicemail messages in whatever order you want just like email.</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="open">?</div>
<div class="lists">
<ol>
<li>Product 1 / Price : $10</li>
<li>Product 2 / Price : $20</li>
<li>Product 3 / Price : $30</li>
<li>Product 4 / Price : $40</li>
<li>Product 5 / Price : $50</li>
</ol>
</div>
</div>
</div>
这是因为"lists"div仍在获得其全部高度,并且在此之前调用了animate()。你需要考虑这个偏移
$(function () {
var initialHeight = $('.lists').outerHeight();
$('.open').click(function () {
if ($(this).attr('toggled') == "true")
$(this).attr('toggled', "false");
else
$(this).attr('toggled', "true");
$('.lists').slideToggle();
});
$('.next').click(function () {
$('.tip2').fadeIn();
$('.tip1').hide();
});
$('.prev').click(function () {
$('.tip2').hide();
$('.tip1').fadeIn();
});
$('.div').css('bottom', '-' + $(".div").outerHeight() + 'px');
$('.hover, .height').on('mouseenter', function () {
$('.div').stop().animate({ bottom: '0px' }, 'slow');
});
$('.hover, .height').on('mouseleave', function () {
if ($('.open').attr('toggled') == "true") {
remainingHeight = (initialHeight - $(".lists").outerHeight());
$('.div').stop().animate({ bottom: '-' + ($(".height").outerHeight() + remainingHeight) + 'px' }, 'slow');
}
else {
if ($('.lists').css('display') != 'none')
remainingHeight = $(".lists").outerHeight();
else
remainingHeight = 0;
$('.div').stop().animate({ bottom: '-' + ($(".height").outerHeight() - remainingHeight) + 'px' }, 'slow');
}
});
});
.div {background:black;width:350px;position:fixed;bottom:0;right:0}
.hover {padding:2px;text-align:center;border-bottom:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:15%;display:inline-block;position:absolute;margin-top:-19px}
.tip1 {background:black;color:white;padding:5px}
.tip2 {display:none;background:black;color:white;padding:5px}
.prev, .next {text-align:center;border:1px solid #ccc;font-size:20px;color:white;cursor:pointer;background:black;width:35%;display:inline-block}
.open {padding:2px;text-align:center;border:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:22.8%;display:inline-block}
.lists {display:none;background:black;color:white;padding:5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div">
<div class="hover">Hover</div>
<div class="height">
<div class="tip1">MacBook now comes with 1GB of memory standard and larger hard drives for the entire line perfect for running more of your favorite applications and storing growing media collections.</div>
<div class="tip2">iPhone is a revolutionary new mobile phone that allows you to make a call by simply tapping a name or number in your address book, a favorites list, or a call log. It also automatically syncs all your contacts from a PC, Mac, or Internet service. And it lets you select and listen to voicemail messages in whatever order you want just like email.</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="open" toggled="false">?</div>
<div class="lists">
<ol>
<li>Product 1 / Price : $10</li>
<li>Product 2 / Price : $20</li>
<li>Product 3 / Price : $30</li>
<li>Product 4 / Price : $40</li>
<li>Product 5 / Price : $50</li>
</ol>
</div>
</div>
</div>
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- 最大高度转换不;不工作,工作缓慢
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- JQuery - Ajax: encodeUriComponent不工作(EncodeUri工作)