blocks|key|282707|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|282708|card+=+$('.card');
card2+=+$('.card2');

card2.on('click',+function+()+{
++++card2.removeClass('scaleUp').addClass('scaleDown');
++++card.removeClass('scaleDown').addClass('scaleUp');
});

card.on('click',+function()+{
++++card.removeClass('scaleUp').addClass('scaleDown');
++++card2.removeClass('scaleDown').addClass('scaleUp');
});|code-block|syntax|javascript|282709|下面是CSS：|282710|.card+{
++++width:+0px;+
++++height:+0px;
++++border:+1px+solid+red;
++++background:+lightblue;
}
.card2+{
++++width:+200px;+
++++height:+200px;
++++border:+1px+solid+blue;
++++background:+orange;
}
.scaleUp+{
++++width:+200px;
++++height:+200px;
++++transition:+all+3s;
}
.scaleDown+{
++++width:+0px;
++++height:+0px;
++++transition:+all+3s;
}|282711|这里有一个你可以尝试的小提琴：http://jsfiddle.net/tkahn/Humu3/21/|offset|length|282712|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tkahn/Humu3/21/^0|0|0|0|0|F|Z|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Try this:

<pre><code>card = $('.card');
card2 = $('.card2');

card2.on('click', function () {
 card2.removeClass('scaleUp').addClass('scaleDown');
 card.removeClass('scaleDown').addClass('scaleUp');
});

card.on('click', function() {
 card.removeClass('scaleUp').addClass('scaleDown');
 card2.removeClass('scaleDown').addClass('scaleUp');
});
</code></pre>

Here's the CSS:

<pre><code>.card {
 width: 0px; 
 height: 0px;
 border: 1px solid red;
 background: lightblue;
}
.card2 {
 width: 200px; 
 height: 200px;
 border: 1px solid blue;
 background: orange;
}
.scaleUp {
 width: 200px;
 height: 200px;
 transition: all 3s;
}
.scaleDown {
 width: 0px;
 height: 0px;
 transition: all 3s;
}
</code></pre>

Here's a fiddle where you can try it:
<a href="http://jsfiddle.net/tkahn/Humu3/21/" rel="nofollow">http://jsfiddle.net/tkahn/Humu3/21/</a>

blocks|key|1426270|text|这是小提琴检查这个http://jsfiddle.net/sarfarazdesigner/Humu3/27/你可以修改它，并检查下面的代码css|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1426271|.card+{
++++border:+1px+solid+red;
++++background:+lightblue;
++++transition:+all+3s;
++++visibility:hidden;
++++width:+100px;
}
.card2+{
++++width:+200px;+height:+200px;
++++border:+1px+solid+blue;
++++background:+orange;
++++transition:+all+3s;
}
.scaleUp+{
++++-webkit-transform:+scale(2);/*Safari+5%2B,+Chrome+10%2B*/
++++-ms-transform:+scale(2);+/*Internet+Exlorer+9%2B*/
++++transform:+scale(2);
}
.scaleDown+{
++++-webkit-transform:+scale(0.50);/*Safari+5%2B,+Chrome+10%2B*/
++++-ms-transform:+scale(0.50);+/*Internet+Exlorer+9%2B*/
++++transform:+scale(0.50);
}|code-block|syntax|javascript|1426272|jQuery|1426273|$('.card2').click(function+()+{
++++$('.card').css({visibility:'visible'}).addClass('scaleUp');
++++$(this).addClass('scaleDown');
});|1426274|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sarfarazdesigner/Humu3/27/^0|1Y|3|9|1A|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Here is the fiddle check this <a href="http://jsfiddle.net/sarfarazdesigner/Humu3/27/" rel="nofollow">http://jsfiddle.net/sarfarazdesigner/Humu3/27/</a>
you can modify it your according and check the code below
css

<pre><code>.card {
 border: 1px solid red;
 background: lightblue;
 transition: all 3s;
 visibility:hidden;
 width: 100px;
}
.card2 {
 width: 200px; height: 200px;
 border: 1px solid blue;
 background: orange;
 transition: all 3s;
}
.scaleUp {
 -webkit-transform: scale(2);/*Safari 5+, Chrome 10+*/
 -ms-transform: scale(2); /*Internet Exlorer 9+*/
 transform: scale(2);
}
.scaleDown {
 -webkit-transform: scale(0.50);/*Safari 5+, Chrome 10+*/
 -ms-transform: scale(0.50); /*Internet Exlorer 9+*/
 transform: scale(0.50);
}
</code></pre>

jQuery

<pre><code>$('.card2').click(function () {
 $('.card').css({visibility:'visible'}).addClass('scaleUp');
 $(this).addClass('scaleDown');
});
</code></pre>

blocks|key|283538|text|这是另一种方法，使用jQuery+.animate();|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|283539|283540|$('.card2').click(function+()+{
++++$('.card').animate({
++++++++width:+'200',
++++++++height:+'200',
++++++++fontSize:+'100%25',
++++++++opacity:+'1'
++++},+500,+function+()+{});
++++$('.card2').animate({
++++++++width:+'0',
++++++++height:+'0',
++++++++fontSize:+'0%25',
++++++++opacity:+'0'
++++},+500,+function+()+{});

++++$('.card').click(function+()+{
++++++++$('.card2').animate({
++++++++++++width:+'200',
++++++++++++height:+'200',
++++++++++++fontSize:+'100%25',
++++++++++++opacity:+'1'
++++++++},+500,+function+()+{});
++++++++$('.card').animate({
++++++++++++width:+'0',
++++++++++++height:+'0',
++++++++++++fontSize:+'0%25',
++++++++++++opacity:+'0'
++++++++},+500,+function+()+{});
++++});
});|code-block|syntax|javascript|283541|这种方法有几个优点：|283542|283543|对于较旧的浏览器，它应该会优雅地降级，不透明度可能会丢失，但缩放仍然有效。|unordered-list-item|283544|+div内的文本将随div一起缩放/隐藏。|283545|边框将随div一起隐藏。|283546|283547|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate/^0|H|B|A|I|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1B|8|@]|D|@]|E|$J|K]]|$1|L|3|M|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1E|8|@]|D|@]|E|$]]|$1|R|3|S|5|Q|7|1F|8|@]|D|@]|E|$]]|$1|T|3|U|5|Q|7|1G|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

Here's another method, using <a href="http://api.jquery.com/animate/" rel="nofollow">jQuery <code>.animate();</code></a>

<a href="http://jsfiddle.net/apaul34208/Humu3/34/" rel="nofollow">jsFiddle</a>

<pre><code>$('.card2').click(function () {
 $('.card').animate({
 width: '200',
 height: '200',
 fontSize: '100%',
 opacity: '1'
 }, 500, function () {});
 $('.card2').animate({
 width: '0',
 height: '0',
 fontSize: '0%',
 opacity: '0'
 }, 500, function () {});

 $('.card').click(function () {
 $('.card2').animate({
 width: '200',
 height: '200',
 fontSize: '100%',
 opacity: '1'
 }, 500, function () {});
 $('.card').animate({
 width: '0',
 height: '0',
 fontSize: '0%',
 opacity: '0'
 }, 500, function () {});
 });
});
</code></pre>

This method offers a few advantages:

<ul>
<li>It should degrade gracefully for older browsers, opacity may be lost but scaling will still work.</li>
<li>The text inside div will scale/hide along with the div.</li>
<li>Borders will be hidden along with the div. </li>
</ul>

blocks|key|3326249|text|您可以使用jQuery+Transit来完成此任务。它可以在大多数浏览器中工作，在移动设备上也表现良好：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3326250|//set+card+initial+state
$('.card2').css({+scale:+0+});

$('.card').on('click',+function+()+
{
++++$('.card2').transition({+scale:+1+},+3000);
++++$('.card').transition({+scale:+0+},+3000);
});

$('.card2').on('click',+function+()+
{
++++$('.card2').transition({+scale:+0+},+3000);
++++$('.card').transition({+scale:+1+},+3000);
});|code-block|syntax|javascript|3326251|JS+Fiddle+Demo|3326252|entityMap|0|LINK|mutability|MUTABLE|url|http://ricostacruz.com/jquery.transit/|1|http://jsfiddle.net/TheGAFF/fBEqR/^0|5|E|0|0|0|0|E|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

You can use <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jQuery Transit</a> to accomplish this. It works in most browsers and performs well on mobile devices too:

<pre><code>//set card initial state
$('.card2').css({ scale: 0 });

$('.card').on('click', function () 
{
 $('.card2').transition({ scale: 1 }, 3000);
 $('.card').transition({ scale: 0 }, 3000);
});

$('.card2').on('click', function () 
{
 $('.card2').transition({ scale: 0 }, 3000);
 $('.card').transition({ scale: 1 }, 3000);
});
</code></pre>

<h2><a href="http://jsfiddle.net/TheGAFF/fBEqR/" rel="nofollow">JS Fiddle Demo</a></h2>

I have two div tags which are card 1 and card 2. When user clicks on card 2 then card 2 should scale down and card 1 should scale up. I am doing this using css3 transformation and jquery click event. The problem is it does not start that animation at all. Here is <a href="http://jsfiddle.net/Humu3/" rel="nofollow">jsfiddle</a>

Here is my code

<pre><code>.card {
 border: 1px solid red;
 background: lightblue;
 visibility: hidden;
 transition: all 3s;
}
.card2 {
 width: 200px; height: 200px;
 border: 1px solid blue;
 background: orange;
 transition: all 3s;
}
.scaleUp {
 -webkit-transform: scale(1);
}
.scaleDown {
 -webkit-transform: scale(0);
}
</code></pre>

css3 animation does not start with jquery click event

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有两个div标签，分别是卡1和卡2。当用户点击卡2时，卡2应该缩小，卡1应该放大。我使用css3转换和jquery单击事件来实现这一点。问题是它根本不会启动该动画。这是以下是我的代码.card {    border: 1px solid red;    background: lightblue;    visib...

问css3动画不是从jquery单击事件开始的
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css3动画不是从jquery单击事件开始的EN