0

该脚本从上到下绘制一条线，但它从鼠标悬停“onhover”开始，我希望它在打开页面时绘制它。

这是要清楚的整个代码。它唯一的功能就是从这条线上悬停$( this ).hover(function()。

var animationDuration = "0.4"
var backgroundColor = "white"

$.fn.line = function liner(animationDuration, borderWidth, side, backgroundColor) {
    var className = "line"
    var timePerSide = animationDuration

    $(this).append('<div class=' + className + '> <div></div> </div>');

    $(this).children("." + className).css({
        "-webkit-transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s",
        "transition": "all " + timePerSide + "s linear " + timePerSide * 0 + "s",
        "background-color": backgroundColor,
    });

    switch (true) {
        case side == "right":
            $(this).children(".line").css({
                "top": "0",
                "right": "-10",
                "height": "0%",
                "width": borderWidth,
            });
    }

    if (side == "right") {
        $(this).hover(function () {
            $(this).children(".line").css({
                "height": "150%",
            });
        });
    }
};

这是我的 HTML

<body>
<div class="box1 float-left liner">
<h1>Lorem</h1>
</div>
</body>
<script type="text/javascript">
    $( document ).ready(function() {
        $('.liner').line(animationDuration, "5px", "right", backgroundColor);
    });
    </script>
</html>
4

1 回答 1

0

听起来您想忽略悬停功能，只需在加载时运行插件的一部分。您将不得不修改插件，这可能不是主意。而不是这个：

if (side == "right") {
    $(this).hover(function () {
        $(this).children(".line").css({
            "height": "150%",
        });
    });
}

...只需这样做：

if (side == "right") {
    $(this).children(".line").css({
        "height": "150%",
    });
}

如果您需要代码在这两个事件上运行，您可以将内部部分拉出到一个命名函数中并为两者调用它：

function setLineHeight(els) {
    $(els).children(".line").css({
        "height": "150%",
    });     
}

... 接着：

if (side == "right") {
    $(this).hover(function () {
        setLineHeight(this);
    });

    setLineHeight(this); // called when the plugin is initialized (on document.ready)
}
于 2014-11-13T18:01:30.833 回答