jQuery fadeIn实际上并没有逐渐消失
jQuery fadeIn not actually fading in
我有一个jQuery函数,其中某些div会淡入淡出,我无法将整个文件粘贴到jsFiddle中,因为它太大了,所有图像链接都是相对的,但我有以下内容。。。
// On click hide default, Country specific
$('.default .asia').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-asia').fadeIn("fast");
$('.viewport-asia').dequeue();
});
});
$('.default .north-america').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-america').fadeIn("fast");
$('.viewport-america').dequeue();
});
});
$('.default .europe').click(function(){
$('.default').fadeOut("fast");
$(".default").queue(function () {
$('.viewport-europe').fadeIn("fast");
$('.viewport-europe').dequeue();
});
});
// Drag event
$(".america-big").draggable();
$(".europe-big").draggable();
$(".asia-big").draggable();
// Reset map
$('a.zoom-out').click(function(){
$('.hidden').fadeOut("fast");
$(".hidden").queue(function () {
$('.default').fadeIn("fast");
$('.hidden').dequeue();
});
})
});
最后一个函数//Reset Map"a.zoom-out"应该淡出当前div并淡出.defaultdiv,它当前淡出当前div,但默认div没有淡出?
有人看到我哪里出错了吗?
HTML
<div class="map">
<!-- // Default Map -->
<div class="default">
<div class="asia"><img src="map/asia.png" alt="Asia"></div>
<div class="north-america"><img src="map/north-america.jpg" alt="America"></div>
<div class="europe"><img src="map/europe.jpg" alt="Europe"></div>
</div>
<!-- // Animated Map // North America -->
<div class="viewport-america hidden">
<div class="compass">
<a href="#" class="arrow top">Top</a>
<a href="#" class="arrow right">Right</a>
<a href="#" class="arrow bottom">Bottom</a>
<a href="#" class="arrow left">Left</a>
</div>
<a href="#" class="zoom-out">Zoom Out</a>
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="america-big"><img src="http://placekitten.com/1989/996" alt="America" /></div>
</div>
<!-- // Animated Map // Europe -->
<div class="viewport-europe hidden">
<div class="compass">
<a href="#" class="arrow top">Top</a>
<a href="#" class="arrow right">Right</a>
<a href="#" class="arrow bottom">Bottom</a>
<a href="#" class="arrow left">Left</a>
</div>
<a href="#" class="zoom-out">Zoom Out</a>
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="europe-big"><img src="http://placekitten.com/2000/1000" alt="Europe" /></div>
</div>
<!-- // Animated Map // Asia -->
<div class="viewport-asia hidden">
<div class="compass">
<a href="#" class="arrow top">Top</a>
<a href="#" class="arrow right">Right</a>
<a href="#" class="arrow bottom">Bottom</a>
<a href="#" class="arrow left">Left</a>
</div>
<a href="#" class="zoom-out">Zoom Out</a>
<div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
<div class="asia-big"><img src="http://placekitten.com/1999/999" alt="Asia" /></div>
</div>
</div>
您不需要queue
函数。
如果您同时想要fadeIn
和fadeOut
:
$('.default .asia').click(function(){
$('.default').fadeOut("fast");
$('.viewport-asia').fadeIn("fast");
});
如果您首先想要fadeOut
,并且在它完成fadeIn
:之后
$('.default .asia').click(function(){
$('.default').fadeOut("fast", function(){
$('.viewport-asia').fadeIn("fast");
});
});
相关文章:
- 为什么使用AWS Signature v4对S3的REST调用并没有真正使用签名过程
- PhantomJS并没有在每次加载页面时进行所有AJAX调用
- 我的自动完成并没有暗示什么
- 世界的时钟并没有滴答作响
- 因果报应并没有执行测试用例
- 当选择不同的父母时,我如何使条件形式的孩子消失并清除
- $.ajax中的成功并没有被执行
- Mozilla并没有完美地执行这段代码,尽管它适用于Chrome和IE
- Rally App SDK 2.0:Ext.Element 方法“不可选择”并没有那么规范化
- 警报消失并发生键控事件
- 函数将信息返回到控制台日志,但实际上并没有执行应有的操作
- 扶手并没有填满表格
- Javascript似乎并没有取消隐藏我的元素
- 滑雪者并没有做出反应
- React路由帮助路由实际上并没有跳转到页面
- JS变量“;消失”;没有理由,变得空虚
- 元素维度正在DOM中更新,但更改并没有发生;t在调整大小时显示
- .fadeTo并没有慢慢消失
- jQuery fadeIn实际上并没有逐渐消失
- jQuery函数并没有按我的计划工作,DIV只是在点击时消失