Question

我想制作一个翻转的幻灯片。我想出的是这个：

$(document).ready(function(){

    $('.menu').click(function(){

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});


        if($('.sidepanel').css("width","5%")){

        $('.sidepanel').animate({"width":"30%"});
        $('.rightpanel').animate({"width":"70%"});


        }

        else{

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});
        }

    });

});

正在发生的事情是，当我点击＆＃34;菜单＆＃34;时，它会回滚到5％的宽度，但再次变为30％，我希望它在第二次点击时进入。我还用另一种方式：

$(document).ready(function(){

    $('.menu').click(function(){

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});


    }, function(){

        $('.sidepanel').animate({"width":"30%"});
        $('.rightpanel').animate({"width":"70%"});
    });

});

这也行不通。请告诉我如何告诉jquery在第二次点击时做点什么提前致谢。类似于使用的第一个或第二个jquery代码的答案将非常好。这是小提琴：http://jsfiddle.net/Ju5va/

Answer 1

你正在使用.css（）的setter版本，它返回一个jQuery对象，所以它总是很简单。

尝试使用

之类的标志

$(document).ready(function () {
    var flag = false;
    $('.menu').click(function () {
        if (flag) {
            $('.sidepanel').animate({
                "width": "30%"
            });
            $('.rightpanel').animate({
                "width": "70%"
            });
        } else {
            $('.sidepanel').animate({
                "width": "5%"
            });
            $('.rightpanel').animate({
                "width": "95%"
            });
        }
        flag = !flag;

    });
});

演示：Fiddle

缩短的方式是

$(document).ready(function () {
    var flag = false;
    $('.menu').click(function () {
        var side = flag ? 30 : 5;
        $('.sidepanel').stop(true).animate({
            "width": side + "%"
        });
        $('.rightpanel').stop(true).animate({
            "width": (100 - side) + "%"
        });
        flag = !flag;
    });
});

演示：Fiddle

Answer 2

我要回复你的第一部分代码：

点击菜单时
将侧面板宽度更改为5％
将右侧面板宽度更改为95％
如果侧面板宽度为5％ - 我们设置了两行，那么只要发生点击就会将if语句评估为true
将侧面板设置为30％
将右侧面板设为70％

将您的代码更改为：

$(document).ready(function() {
    $('.menu').click(function() {
        var width = 100 * parseFloat($('.sidepanel').css('width')) / parseFloat($('.sidepanel').parent().css('width'));
        width = Math.round(width) + '%';
        if(width === "5%") {
            $('.sidepanel').animate({"width": "30%"});
            $('.rightpanel').animate({"width": "70%"});
        } else {
            $('.sidepanel').animate({"width":"5%"});
            $('.rightpanel').animate({"width":"95%"});
        }
    });
});

将会显示：

点击时
如果它很窄
使它宽阔
，否则
缩小

和工作JSfiddle部分归功于get CSS rule's percentage value in jQuery

Answer 3

稍微改变了你的代码：

      $(document).ready(function(){
            var x=true
                $('.sidepanel').animate({"width":"30%"});
                $('.rightpanel').animate({"width":"70%"});

            $('.menu').click(function(){




                if(x===true){

                $('.sidepanel').animate({"width":"5%"});
                $('.rightpanel').animate({"width":"95%"});
                x=false

                }

                else{

                $('.sidepanel').animate({"width":"30%"});
                $('.rightpanel').animate({"width":"70%"});
                x=true
                }

            });

        });

在同一点击功能中发生第二次点击

3 个答案: