javascript - 在 .click() 之后更改 .css()

Question

我给我写了一个 slider 。 slider 工作得很好，但最后一件事绝对不起作用。我无法重置宽度。我尝试通过 jQuery API 中的 deferred.done 函数调用函数。最后我添加了类似 dfd.resolve( "and"); 的内容。这只有效一次。如何再次更改 $("#first").css("width", t_first); 宽度？

我的JS代码:

$("#zero-img" ).click(function() {
    $(function () {
        var width_slider = ($( "#slider" ).width()) ;
        var width_first = $( "#first" ).width() ;
        var width_first_img = $( "#first-img" ).width() ;
        var width_first_img_container = $( "#first-img-container" ).width() ;
        var width_first_tex = $( "#first-img-text" ).width() ;

        var width_gap = width_slider - width_first - 300;

        var width_img = $( "#first-img-container" ).width() ;
        var t_first = width_first + width_gap;
        $("#first" ).css("width", t_first); //THIS I WANT TO CHANGE AGAIN AFTER FINISHED THE CLICK ACTION
        $("#next-img" ).animate({ width:0 }, "slow" );
        $("#first-img" ).animate({ left: width_first}, "slow", function(){

            if ($("#next-img-container").attr("src").length > 0) {

                var path_on_hold = $("#next-img-container").attr("src");
                $("#on-hold-img-container").attr("src", path_on_hold);
                var value_on_hold = $("#next-img-container").attr("value");
                $("#on-hold-img-container").attr("value", value_on_hold);
                var path_next = $("#first-img-container").attr("src");
                $("#next-img-container").attr("src", path_next);
                var value_next = $("#first-img-container").attr("value");
                $("#next-img-container").attr("value", value_next);
            }
            $(this).css('left', (-1)* width_first);
            var first_img = $("#zero-img-container").attr("src");
            $("#first-img-container").attr("src",first_img);
            var value_first = $("#zero-img-container").attr("value");
            $("#first-img-container").attr("value", value_first);

        } );
        $("#zero-img" ).animate({ left:-150 }, "slow", function() {
            if ($("#zero-on-hold-img-container").attr("src").length > 0) {
                var path_zero = $("#zero-on-hold-img-container").attr("src");
                $("#zero-img-container").attr("src", path_zero);
                var value_zero = $("#zero-on-hold-img-container").attr("value");
                $("#zero-img-container").attr("value", value_zero);
                var pics =  <?php echo json_encode($pics)?>;
                var number = parseInt($("#zero-on-hold-img-container").attr("value"));
                if (pics.hasOwnProperty(number-1) === true ) {
                    var company_id = pics[number-1].company_id;
                    var filename = pics[number-1].filename;
                    var temp = path + pics[number-1].company_id + "/" + pics[number-1].filename;

                    $("#zero-on-hold-img-container").attr("src", temp);
                    $("#zero-on-hold-img-container").attr("value", number-1);
                    $("#zero-on-hold-img-container").attr("value", number-1);
                } else {
                    $("#zero-on-hold-img-container").attr("src", "");
                    $("#zero-on-hold-img-container").attr("value", "");
                }
            } else {
                if ($("#zero-img-container").attr("src").length > 0) {
                    $("#zero-img-container").attr("src", "");
                    $("#zero-img-container").attr("value", "");
                }
            }
        });
        $("#zero-img").animate({ left: 0 }, "slow");
        $("#next-img" ).animate({ width:150 }, "slow" );  
        $("#first-img").animate({ left: 15 }, "slow");
        /*$("#first" ).css("width", auto);*/                

    });

});

Answer 1

它只能工作一次的原因是因为 width_slider 最初设置为正确的宽度，但随后您将宽度更改为自动，因此 width_slider 将永远不会再次成为初始宽度。

<!-- put the initial width of slider in data-init-width -->
<div id="slider" data-init-width="960"> ... </div>

脚本:

$('#zero-img').click(function() {
        var initialWidth = Number($('#slider').attr('data-init-width'));
        if ( $('#slider').width() != initialWidth ){
            $('#slider').css({
                width: initialWidth + 'px'
            });
        }
        var width_slider = $('#slider').width();
        // do the other stuff
});

然后使用mouseup方法

$('#zero-img').mouseup(function(){
    // change the width to the after click width
});