jquery - div的外观面

Question

我想在这个网站http://gabrieleromanato.com/上创建一个像这样的侧边栏

按下“邮件图标”其实就达到了我想要的效果。我对jquery知之甚少，所以我无法达到'目标。

我希望你们中的一些人可以帮助我

在此先感谢大家

Answer 1

假设您的 div 将在点击时显示，其宽度为 300 像素。您的 div css 必须至少包含两个属性，

.div1 {
  position:fixed;
  top: 5%; // Use whatever you want
  width: 300px;
  left: -300px; // The width of your div, may have to change slightly based on your design.
}

现在点击任何图标说 id icon1

$(document).ready(function () {
   $("#icon1").click(function () {
       var left = parseInt($(".div1").css('left')) < 0 ? 0 : '-300px';

       $(".div1").animate({left: left }, 1000);
   });
});

这可能会有所帮助。

谢谢

Answer 2

jsfiddle 在这里

我使用 .animate() 来切换框的宽度。

HTML：

<div id="box">
    <div id="opener">Opener</div>
    <div id="message">This is the message</div>
</div>

CSS：

#box {
    position:fixed;
    top: 20px;
    left: 0;
    width: 200px;
    height: 400px;
}
#opener {
    position: relative;
    float: right;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #000;
    overflow: hidden;
}
#message {
    float: left;
    overflow: hidden;
    background: #f00;
    width: 160px;
}

jQuery：

$(document).ready(function () {

    $("#box").css("width", "40px");
    $("#message").css("width", "0px");

    var show = 0;

    $("#opener").click(function () {
        if (show === 0) {
            $("#box").animate({
                width: '200px'
            });
            $("#message").animate({
                width: '160px'
            });
            show = 1;
        } else {
            $("#box").animate({
                width: '40px'
            });
            $("#message").animate({
                width: '0px'
            });
            show = 0;
        }
    });
});

您可以随时概括 jQuery，这样您就不需要使用硬编码值。