个人中心
gpt4 book ai didi

javascript - Jquery.switchclass 没有正确加载

转载 作者：太空宇宙 更新时间：2023-11-03 18:21:14 25 4
gpt4 key购买 nike

2 部分问题。

  1. 所以我希望能够点击中间的方 block ，让左上角的框水平向右滑动，右上角的框垂直滑动到底部，等等。

幻灯片时长为 2 秒。

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

    });
});
  1. 在 Fiddle 中动画正在运行。不在 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/

最佳答案

JqueryUI 依赖于 Jquery。

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

关于javascript - Jquery.switchclass 没有正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21805247/

25 4 0
文章推荐： ruby-on-rails - 未定义方法 `sub' 为 nil :NilClass when calling bundle exec db operations
文章推荐： css - 下拉菜单淡入淡出效果
文章推荐： ruby - 如何替换文件名中的 "%26"？
文章推荐： python - Django 1.6 无法显示模板中模型中的多域字段
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com