动画宽度调整100%

animated width resizing 100%

本文关键字：100% 调整 动画      更新时间：2023-09-26

嗨，我有这个动画宽度转换器，当我点击这个脚本上的展开，然后点击我的标题徽标时，它似乎会自动调整到100%。有什么想法吗？

$(".fluid").hide();
$(".fixed").click(function() {
  $("#mainwidth").animate({width: "1024px"}, 800);
    $(this).hide();
    $(".fluid").show();
    $.cookie("width","fixed", {expires: 365});
  return false;
});
$(".fluid").click(function() {
    $("#mainwidth").animate({width: "95%"}, 800);
    $(this).hide();
    $(".fixed").show();
    $.cookie("width","fluid", {expires: 365});
    return false;
});
if($.cookie("width") == "fixed") {
    $(".fixed").hide();
    $(".fluid").show();
    $("#mainwidth").css("width","1024px");
};
text-align: left;
line-height: 1.4;
margin: auto auto;
margin-top: 40px;
margin-bottom: 50px;

问题发生在以下块中：

<script type="text/javascript">
jQuery(function($) {
    $(".fluid").hide();
    $(".fixed").click(function() {
      $("#mainwidth").animate({width: "1024px"}, 800);
        $(this).hide();
        $(".fluid").show();
        $.cookie("width","fixed", {expires: 365});
      return false;
    });
    $(".fluid").click(function() {
        $("#mainwidth").animate({width: "95%"}, 800);
        $(this).hide();
        $(".fixed").show();
        $.cookie("width","fluid", {expires: 365});
        return false;
    });
    if($.cookie("width") == "fixed") {
        $(".fixed").hide();
        $(".fluid").show();
        $("#mainwidth").css("width","1024px");
    };
});
</script>

让我们看看最后一句话：

if($.cookie("width") == "fixed") {
   $(".fixed").hide();
    $(".fluid").show();
    $("#mainwidth").css("width","1024px");
};

它指示浏览器在加载页面时更改宽度。如果width cookie值"固定"，则将宽度设置为1024px。但是，如果页面在cookie值为"fluid"时重新加载，会发生什么？
当您单击徽标时，它会重新加载页面。因此，如果cookie值是流动的，则宽度将不会设置为相关值。只需添加另一块代码来处理cookie值为"fluid"的情况，它就会正常工作。

if($.cookie("width") == "fixed") {
   $(".fixed").hide();
    $(".fluid").show();
    $("#mainwidth").css("width","1024px");
}
else if($.cookie("width") == "fluid") {
    $(".fluid").hide();
    $(".fixed").show();
    $("#mainwidth").css("width","95%");
};
相关文章：