javascript - 动画没有按预期工作

coder 2023-08-11 原文

我正在尝试在单击按钮时在两个 div 上制作动画。这是我创建的演示 js fiddle .我想要的是

当用户单击按钮时，右侧的 div 将向右滑动(它将隐藏)。左侧div的宽度变为100%。

第二次，当用户点击右边的 div 时，将从右向左滑动可见，左边的 div 的宽度为 50%

我正在尝试这段代码。我的 html 是

  <div class="col-md-12">
   <div id="tags-left" class="col-md-6">
      div left 
   </div>
</div>
<div id="tag-div" class="col-md-6">
   div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
   <input id="show-tag" type="button" class="save-btn" value="Show Tag">
   <input id="preview" type="button" class="save-btn" value="Preview">
</div>

我的js是

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
    <div id="tags-left" class="col-md-6">
        
        div left 
        
</div>
    </div>
    <div id="tag-div" class="col-md-6">
        div right
    </div>
    
   
</div>
 <div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>

最佳答案

这是一个简单的解决方案，无需编写太多代码，请参阅 fiddle :https://jsfiddle.net/uzar3j4q/7/

var action = 1;

$("#show-tag").click(function () {
     if ( action == 1 ) {
         $("#tag-div" ).animate({'width':'0%',});
         $('#tags-left').animate({'width':'90%'});
         action = 2;
     } else {
         $("#tag-div" ).animate({'width':'45%',});
         $('#tags-left').animate({'width':'45%'});
         action = 1;
     }
});

CSS

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
    overflow:hidden; /* This property is added just to hide overflowing content */
}

关于javascript - 动画没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30160319/

javascript 动画 34 div 39 jquery html css

有关javascript - 动画没有按预期工作的更多相关文章

ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2
我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？最佳答案表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/
ruby-on-rails - rails 目前在重启后没有安装 - 2
我有一个奇怪的问题:我在rvm上安装了rubyonrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(
ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2
在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
没有类的 Ruby 方法？ - 2
大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。关于没有类的Ruby方法？，我们在StackOverflow
ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2
我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

javascript - 动画没有按预期工作

有关javascript - 动画没有按预期工作的更多相关文章

随机推荐