Question

2部分问题。

所以我希望能够点击中间的方块，它应该将左上方的框水平向右滑动，右上方的框将垂直向下滑动，等等。

幻灯片的持续时间为2秒。

$(document).ready(function(){
    $("#container").click(function(){
        $("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
        $("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);

    });
});

正在运行。不运行chrome或firefox。我使用正确的cdn吗？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cie Studios | Solution</title>
<!--Stylesheet-->
<link rel="stylesheet" href="ciestyle.css">




</head>

<body>
<section id="main">
    <div id="container">
        <div class="horizontal" id="box1">1</div>
        <div class="vertical" id="box2">2</div>
        <div class="vertical" id="box3">3</div>
        <div class="horizontal" id="box4">4</div>
    </div>
        <label>Fig 1.2</label>
</section>
<!--Google JQuery Lib -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Javascript -->
<script src="ciescript.js"></script>
</body>
</html

CSS

* {
    margin:0px auto;
}

#main {
    height:100%;
    width:100%;
    margin-top:20%;
    text-align:center;
}

#container {
    display:block;
    border:1px solid #000;
    background-color:#333333;
    height:151px;
    width:151px;
}

.horizontal {
    width:100px;
    height:50px;
}

.vertical {
    width:50px;
    height:100px;
}

.newHorizontal {
    width:100px!important;
    height:50px!important;
    float:left!important;
    border:0px!important;
}

.newVertical {
    width:50px!important;
    height:100px!important;
    float:right!important;
    border:0px!important;
}

#box1, #box3 {
    float:left;
}

#box2, #box4 {
    float:right;
}

#box1 {
    background-color:#ffffff;
    border-bottom:1px solid #000;
}

#box2 {
    background-color:#cccccc;
    border-left:1px solid #000000;
}

#box3 {
    background-color:#999999;
    border-right:1px solid #000000;
}

#box4 {
    background-color:#666666;
    border-top:1px solid #000000;
}

JQUERY

$(document).ready(function(){
    $("#container").click(function(){
        $("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
        $("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);

    });
});

http://jsfiddle.net/pcdqz/1/

Answer 1

JqueryUI依赖于Jquery。

在加载JqueryUI之前添加<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>或类似的cdn链接。

Jquery.switchclass未正确加载

1 个答案: