Question

我有一个小问题，我想在我的网站上解决。看看这个JSFIDDLE - https://jsfiddle.net/sm25t089/

这是javascript代码：

$(document).ready(function () {
$(".bottoni").hide();
$(".reveal").click(function () {
    $(this).toggleClass("active").next().slideToggle(200, "linear");

    if ($.trim($(this).text()) === '(+)') {
        $(this).text('(×)');
    } else {
        $(this).text('(+)');
    }

    return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});

我喜欢菜单从屏幕外移动到左边，而不是从底部移到顶部。

感谢您的帮助。 F。

Answer 1

这是一个使用css3的解决方案

transition:0.3s;

https://jsfiddle.net/sm25t089/1/

如果您更喜欢只使用ccs2，那么您可以使用jquery animate

执行相同操作

Answer 2

您可以使用jQuery方法 .animate()

(function($) {
    $(document).off("click.slide").on("click.slide", ".reveal", function (e) {
        var $self = $(this),
            $menu = $(".bottoni"),
            isActive;
        e.preventDefault();
        $self.toggleClass("active");
        isActive = $self.hasClass("active");

        $self.text(isActive ? "(x)" : "(+)");

        $menu.animate({
            "left": isActive ? "21px" : "-100px"
        }, 200, "linear");

    });
})(jQuery);

以下是一个带有示例的JSFiddle： https://jsfiddle.net/sm25t089/3/

从底部/顶部向左/右滑动切换

2 个答案: