jQuery在animate on click事件后增加css属性的值

jQuery incrementing value of css property after animate on click event

本文关键字：css 增加 属性 事件 animate on click jQuery      更新时间：2023-10-17

我想根据元素顶部的属性margin，实现从下到下的显示和渐变效果，但我没有想要的结果。第一次淡入淡出时效果很好。但当我第二次执行它时，属性的值比它应该的值大了10倍。每次我点击出现和淡出时，当我再次点击出现时，它比上次多了10倍。如果不增加该值，我该怎么办？代码在上面。有人帮帮我，求你了！谢谢

$(document).on("click",".nav-menu",function(){
    var $initial_margin_top = $(".w-clearfix.nav-menu-ul").css("margin-top"); 
    var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10; 
    if($(this).hasClass("nav-menu-hover")){ 
        $(".w-clearfix.nav-menu-ul").animate({"margin-top": $margin_num+"px","opacity":"0"}); 
        $(".w-clearfix.nav-menu-ul").css({"margin-top": $initial_margin_top});
        $(this).removeClass("nav-menu-hover");
    }else if(!$(this).hasClass("nav-menu-hover")){ 
        $(this).addClass("nav-menu-hover");  
        $(".w-clearfix.nav-menu-ul").css({"margin-top": $margin_num+"px" ,"opacity":"0"});
        $(".w-clearfix.nav-menu-ul").removeClass("hide");
        $(".w-clearfix.nav-menu-ul").animate({"margin-top": $initial_margin_top,"opacity":"1","margin-left":"-1px"}); 
        $(".w-clearfix.nav-menu-ul").css({"margin-top": $initial_margin_top});
    }
});

这一行是您的问题：

var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10;

问题是，你每次都会增加值而不重置它。你需要以某种方式存储原始值，并在每次运行此函数时恢复到原始值。

首先想到的是，将原始值存储在要更改的元素内的属性中，并为其命名为"data-num"。所以你可以有例如：

<div width="50px" data-num="50px"></div>

祝你好运。

您的问题在于这行代码：

var $margin_num = parseInt($initial_margin_top.split("px")[0]) + 10;

每次单击导航菜单项时，初始值都会增加10，因为它位于单击处理程序中。

为了防止这种情况，请在单击函数外声明一次初始边距。

相关文章：