Question

我使用了3秒的掉落效果，但它无法正常工作。它就像是显示/隐藏，没有下降也没有3秒。有什么想法吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#imagem").click(function(ev) {
            ev.stopPropagation();
            ev.preventDefault();
            if ($("div.principal").is(":visible")) {
                $("div.principal").toggle('drop', 3000);
                $("div.tudo").width("675px");
            } else {
                $("div.principal").toggle('drop', 3000);
                $("div.tudo").width("1121px");
            }
        });
    });
</script>

Answer 1

我可以说，这不是股票jQuery toggle（）函数的工作方式。但是，jQuery UI确实有一个“drop”选项，并且在引用库时，您的代码可以正常工作：

<强> HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
    <head>
        <title>TestBed</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
        <script src="app/script.js"></script>
        <link href="Content/site.css" rel="stylesheet" />
    </head>
    <body>
        <p id="imagem">ImageThing</p>
        <div class="principal">Principal</div>
        <div class="tudo">Tudo</div>
    </body>
</html>

<强>的JavaScript

'use strict';

$(function() {
    $("#imagem").click(function(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        if ($("div.principal").is(":visible")) {
            $("div.principal").toggle('drop', 3000);
            $("div.tudo").width("675px");
        } else {
            $("div.principal").toggle('drop', 3000);
            $("div.tudo").width("1121px");
        }
    });
});

Answer 2

我不确定切换是否需要2个参数。如果你试图将切换延迟3秒，那么这可能会起作用。它对我有用。

$（ “div.principal”）延迟（3000）.toggle（ '下降'）;

具有拖放效果的jquery切换无法正常工作

2 个答案: