jQuery UI,在fadeIn之后启动弹跳效果,无法让它工作

时间:2017-01-14 20:37:17

标签: jquery jquery-ui

我有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>

0 个答案:

没有答案