点击幻灯片到宽度100％

Question

我有这段代码：

$('button').click(function(){
    $('.slide').animate({
        width: "450px";
        display: block;
    });
});

.slide {
    width: 0px;
    height: 450px;
    background-color: blue;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slide"></div>

<button>Slide the div</button>

当我点击按钮时，我希望.slide像幻灯片一样显示在左侧。

我已将宽度div设为width: 0px。然后在jQuery中，这个div将获得width: 450px。

Answer 1

animate ;中有一些语法错误，,应该是button，而display没有类，因此点击事件从未执行过。此外，您无法为$('.open-menu').click(function(){ $('.slide').animate({ width: "450" }); });属性设置动画。

这是更新后的代码段：

＆＃13;

＆＃13;

.slide {
    width: 0px;
    height: 450px;
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slide"></div>

<button class="open-menu">Slide the div</button>

＆＃13;

display

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的代码存在一些问题：

• Animate无法处理open-menu财产。
• 点击处理程序设置应包含在jQuery ready function。
中
• 按钮需要课程animate。
• $(function () { $('.open-menu').click(function(){ $('.slide').animate({ width: "450px" }); }); });参数中的对象属性不应以分号结尾。

请参阅下面的工作示例。

＆＃13;

＆＃13;

.slide {
    width: 0px;
    height: 450px;
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="open-menu">Slide the div</button>
<div class="slide"></div>

＆＃13;

android:background="?attr/selectableItemBackground"

＆＃13;

＆＃13;

＆＃13;