支持修改

contactus.html

@@ -159,6 +159,7 @@
         <div id="test1">
             <ul class="lateral-fold" data-event="click">
                 <li class="on first firsted" > 
+                    <div class="association">
                         <div class="oness">品牌</div>
                         <div class="sected">
                             <p class="two">品牌支持</p>
@@ -167,9 +168,11 @@
                             <p>唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业</p>
                             <p>唐山市具有网签资质的房地产企业</p>
                         </div>  
+                    </div> 
                 </li>
                 <li class="on">
                     <div class="shadow">
+                        <div class="association associations">
                             <div class="oness twor">宣传</div>
                             <div class="sected secteds">
                                 <p class="two">宣传支持</p>
@@ -179,9 +182,11 @@
                                 <p>唐山市全覆盖广告</p>
                             </div>
                         </div>
+                    </div>
                 </li>
                 <li class="on">
                     <div class="shadow">
+                        <div class="association associations">
                             <div class="oness twor">培训</div>
                             <div class="sected secteds">
                                 <p class="two">培训支持</p>
@@ -191,9 +196,11 @@
                                 <p>更切实际的滚动式培训，培养人才</p>
                             </div>
                         </div>
+                    </div>
                 </li>
                 <li class="on">
                     <div class="shadow">
+                        <div class="association associations">
                             <div class="oness twor">权证</div>
                             <div class="sected secteds">
                                 <p class="two">权证支持</p>
@@ -203,9 +210,11 @@
                                 <p>让每一笔带框安全无忧过户，过户更安全，服务更专业</p>
                             </div>
                         </div>
+                    </div>
                 </li>
                 <li class="on">
                     <div class="shadow">
+                        <div class="association associations">
                             <div class="oness twor">职能</div>
                             <div class="sected secteds">
                                 <p class="two">部门支持</p>
@@ -215,9 +224,11 @@
                                 <p>每个月60多万，专门定制系统房客源储备充足，足够支持成交</p>
                             </div>
                         </div>
+                    </div>
                 </li>
                 <li class="on last" >
                     <div class="shadow">
+                        <div class="association associations">
                             <div class="oness twor">系统</div>
                             <div class="sected secteds">
                                 <p class="two">系统支持</p>
@@ -227,6 +238,7 @@
                                 <p>大数据系统，足够支持成交</p>
                             </div>
                         </div>
+                    </div>
                 </li>
             </ul>
         </div>

css/contactus.css

@@ -429,7 +429,33 @@
 #test1 ul .firsted:nth-of-type(6){
     background: url(../images/f.jpg) no-repeat;
 }
-
+#test1 .on .association{
+    width: 536px;
+    height: 400px;
+    overflow: hidden;
+    position: absolute;
+    left: 0px;
+    top:0px; 
+}
+#test1 .on .associations{
+    left: -417px;
+}
+@-webkit-keyframes kais{
+    0%{
+        left: -417px;
+    }
+    80%,100%{
+        left: 0px;
+    }
+}
+@-webkit-keyframes shous{
+    10%{
+        left: -417px;
+    }
+    100%{
+        left: -417px;
+    }
+}
 #test1 .on  p{
     color: #fff;
     text-align: right;
@@ -440,14 +466,26 @@
     font-weight: bold;
 }
 #test1 .on .sected{
-    width: 378px;
+    width: 380px;
     height: 140px;
     overflow: hidden;
-    position: absolute;
-    top: 220px;
-    left: 140px;
+    margin-left:140px;
+    margin-top:10px; 
+    opacity: 1;
+}
+
+@-webkit-keyframes kai{
+    100%{
         opacity: 1;
-    transition:all .7s;
+    }
+}
+@-webkit-keyframes shou{
+    10%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 0;
+    }
 }
 #test1 .on .oness{
     width: 90px; 
@@ -457,9 +495,8 @@
     color: #fff;
     font-size: 40px;
     font-weight: bold;
-    position: absolute;
-    left: 430px;
-    top: 110px;
+    margin-left: 430px;
+    margin-top:110px;
     background: linear-gradient(to left, #fff, #fff) left top no-repeat, 
                 linear-gradient(to bottom, #fff, #fff) left top no-repeat, 
                 linear-gradient(to left, #fff, #fff) right top no-repeat,
@@ -469,10 +506,6 @@
                 linear-gradient(to left, #fff, #fff) right bottom no-repeat,
                 linear-gradient(to left, #fff, #fff) right bottom no-repeat;
     background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
-    transition:left .8s;
-}
-#test1 .on  .twor{
-    left: 15px;
 }
 #test1 .on .secteds{
     opacity: 0;

js/common.js

@@ -42,10 +42,12 @@ var common = function () {
     $(".on").click(function(){
         $(this).css("width","536px").siblings().css("width","118px");
         $(this).addClass('firsted').siblings().removeClass('firsted');
-        $(this).find(".oness").css("left","430px");
-        $(this).siblings().find(".oness").css("left","15px");
-        $(this).find(".sected").css({"opacity":"1","left":"140px","width":"378px"});
-        $(this).siblings().find(".sected").css({"opacity":"0","left":"-100px","width":"0px"});
+        $(this).find(".sected").css('-webkit-animation','kai 0.6s linear forwards')
+        $(this).find(".sected").addClass('secteds')
+        $(this).siblings().find(".sected").css('-webkit-animation','shou 0.6s linear forwards');
+        $(this).find(".association").css('-webkit-animation','kais 0.6s linear forwards')
+        $(this).find(".association").addClass('associations')
+        $(this).siblings().find(".association").css('-webkit-animation','shous 0.6s linear forwards');
     })
 }