我有4张照片" Goog",它们被隐藏了。我想淡出其中两个,然后启动Bounce,就像第二个效果一样。但我只能用按钮来做,而不是在fadeIn完成功能:
jsfiddle :link
<input type="button" id="bouncebutton" value="Click to insert first letter 'G' and third 'o'"/>
<div id="logos">
<img src="https://picoolio.net/images/2017/01/14/1f2270.png" style="display: none;" /><!--G-->
<img src="https://picoolio.net/images/2017/01/14/2407ae.png" style="display: none;" /><!--o-->
<img src="https://picoolio.net/images/2017/01/14/3184af.png" style="display: none;" /><!--o-->
<img src="https://picoolio.net/images/2017/01/14/4422f7.png" style="display: none;" /><!--g-->
</div>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
"use strict";
jQuery(document).ready(function () {
$("#logos > img:odd").fadeIn(5000, function () {
// bot these works wrong (toggle works Ok with button , see example below) :
//$("#logos > img:even").effect("bounce", { times: 3 }, 300);
//$("#logos > img:even").toggle("bounce", { times: 3 }, "slow");
});
// here with button it works Ok.. :
$("#bouncebutton").on("click", function () {
// this works wrong (something with 'bounce' syntax?..)
// $("#logos > img:even").effect("bounce", { times: 3 }, 300);
// here it works like a charm (on click), but works wrong in fadeIn delegate(
$("#logos > img:even").toggle("bounce", { times: 3 }, "slow");
});
});
</script>
jQuery是jquery-3.1.1.min.js
jQuery UI jquery-ui-1.12.1.custom
更新:已解决。我的愚蠢错误 - 有两张图片,并为每个图片启动了两次切换。我添加了wasLaunched标志,不是我知道的理想解决方案:
<script type="text/javascript" language="javascript">
"use strict";
jQuery(document).ready(function () {
var wasToggled = false;
jQuery("#logos > img:odd").fadeIn(8000, function () {
if (!wasToggled) {
jQuery("#logos > img:even").toggle("bounce", { times: 3 }, 1500);
wasToggled = true;
}
});
});
</script>