Question

所以我有这个搜索框，通过改变它的宽度显示和隐藏现在我想在搜索图标宽度大于零的情况下向搜索图标添加一个

$("#search input").animate({width: "0px"}, 0);
var searchWidth = $('#search input').width();

$('#search i').click( function() {
    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });

    //Make the search icon red
    if ( searchWidth > 0 ) {
        $("#search i").addClass("active");
    } else {
        $("#search i").removeClass("active");
    }
});

现在它与toggleClass一起工作但是如果你点击的速度比动画搞得快，那么这就是为什么我尝试了以上......

    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });
    //Make the search icon red
    $("#search i").toggleClass("active");

Answer 1

在下方移动searchWidth计算逻辑，因为您在更改单击时的宽度。

$("#search input").animate({width: "0px"}, 0);
//var searchWidth = $('#search input').width();

$('#search i').click( function() {
    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });
var searchWidth = $('#search input').width();
    //Make the search icon red
    if ( searchWidth > 0 ) {
        $("#search i").addClass("active");
    } else {
        $("#search i").removeClass("active");
    }
});

如果元素宽度等于..像素，则执行addClass

1 个答案: