Question

我正在使用简单的矩形教我自己的动画，到目前为止，我已经通过这个简单的项目取得了一些进展：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>test slider</title>

        <link rel="stylesheet" type="text/css" href="styles.css">    
        <script type="text/javascript" src="jquery.js"></script>    
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <span class="rect">
            <span class="otherrect"></span>
        </span>    
        <p id="button"> click here </p>
    </body>
</html>

CSS

.rect{
    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;   
}

.otherrect {
    float: left;
    height: 200px;
    width: 250px;
    background-color: red;
}

.closed {
    height: 0;
    background-color: white; 
}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

JS

$(document).ready(function(){

    $("#button").click(function(){

        if ($( ".rect" ).hasClass( "closed" )){

            $(".rect").removeClass("closed");

        } else {

        $(".rect").addClass("closed");  
    }

    });
});

它看起来像这样：

所以，我的目标是，红色矩形（class：otherrect）也应该像其父矩形那样折叠和淡出。如何在不使用javascript的情况下执行此操作，最好不必使用display属性。谢谢你的时间。 P

---------------------------------收到答复后的编辑---------- -------------------------

谢谢大家的回答。这些都是这样或那样的好，但我想我可以提到红色矩形将成为完成项目中的视频所以我需要它作为另一个元素的子元素，因为如果它崩溃它的类直接应用于它，它会影响它的外观。请参考这个其他问题，看看我的意思是gif： slideDown() function behaving oddly

Answer 1

更改您的span类或添加如下：

    <span class="rect">
        <span class="otherrect rect"></span>
    </span>

Answer 2

只需在overflow:hidden;课程中添加.rect {即可。：）

Answer 3

将动画设置移动到第3类（＆＃34; anim＆＃34;），同时为这两个span元素提供类，并添加＆＃34;关闭＆＃34;使用＆＃34; anim＆＃34;对任何元素进行分类在你的onclick中上课。

注意：这会使用与您的问题相同数量的JavaScript，我认为这是正常的（但在技术上并不符合＆＃34;不使用javascript＆＃34;要求）

（对于onclick来说是马克B）

编辑：添加了视频。动画有点儿，抱歉:(

＆＃13;

$(function(){
    $("#button").click(function() {
        $('.anim').toggleClass('closed')
    });
});

＆＃13;

.rect{
    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;
}

.anim {
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.otherrect {
    float: left;
    height: 200px;
    width: 250px;
    background-color: red;
}

.closed {
    height: 0;
    background-color: white;
}

video {all:inherit}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <span class="rect anim">
        <span class="otherrect anim"><video class="anim" controls>
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video></span>
    </span>
    <p id="button"> click here </p>
</body>

＆＃13;

如何让父母与父母一起崩溃

3 个答案: