jquery - js向两边展开
问题描述
比如我有这样一个p宽100高100我想点击的是时候让他的展示方式是从中间向两边展开，css3要怎么写
问题解答
回答1：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>.outter { position: relative; width: 202px; height: 400px;}.left,.right { position: absolute; top: 0; left: 0; display: inline-block; width: 100px; height: 400px; background-color: #000;}.right { left: inherit; right: 0;}.ani { animation: ani 5s; -moz-animation: ani 5s; /* Firefox */ -webkit-animation: ani 5s; /* Safari 和 Chrome */ -o-animation: ani 5s;}@keyframes ani { from {width: 100px; } to {width: 0; }} </style></head><body> <p class='outter'><p class='left inner'></p><p class='right inner'></p> </p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { var inner = $(’.inner’); $(’.outter’).one(’click’, function() {inner.addClass(’ani’).on(’webkitAnimationEnd’, function() { inner.hide();}); }); }); </script></body></html>回答2：
作为初学者，看楼主提问带的标签里有JQ，就兴致勃勃地写了一下。其实楼上的CSS3属性真心很好啊！
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>两边展开</title> <link rel='stylesheet' href='https://www.haobala.com/wenda/5947.html'> <style> .content {width: 100px;height: 100px;position: relative;overflow: hidden; }.content p {position: absolute;width: 49px;height: 100px; }.left {left: 0;background-color: black;margin-right: 2px; }.right {background-color: black;right: 0; } </style></head><body> <p class='content'><p class='left'></p><p class='right'></p> </p> <script src='https://www.haobala.com/wenda/js/jquery-1.12.0.min.js'></script> <script> $(function() {$('.content').click(function() { $('.left').animate({left: '-49px' }, 1000); $('.right').animate({right: '-49px' }, 1000)}) }) </script></body></html>回答3：
使用translateX(n)属性，文档看下面http://www.w3school.com.cn/css3/css3_2dtransform.asp
相关文章：
1. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败！2. 前端 - css中关于设置透明度的问题，有点混乱3. docker-compose 为何找不到配置文件？4. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？5. docker start -a dockername 老是卡住，什么情况？6. 计算机 - 我学习了C语言，数据结构和一点点java基础，想自学C++，请问买什么入门书籍好？7. docker - 如何修改运行中容器的配置8. dockerfile - 我用docker build的时候出现下边问题 麻烦帮我看一下9. docker绑定了nginx端口 外部访问不到10. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？
网公网安备