css3动画不是从jquery单击事件开始的
css3动画不是从jquery单击事件开始的
提问于 2013-05-09 15:03:03
我有两个div标签，分别是卡1和卡2。当用户点击卡2时，卡2应该缩小，卡1应该放大。我使用css3转换和jquery单击事件来实现这一点。问题是它根本不会启动该动画。这是jsfiddle
以下是我的代码
.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);
}回答 4
Stack Overflow用户
回答已采纳
发布于 2013-05-09 15:46:26
这是小提琴检查这个http://jsfiddle.net/sarfarazdesigner/Humu3/27/你可以修改它，并检查下面的代码css
.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);
}jQuery
$('.card2').click(function () {
$('.card').css({visibility:'visible'}).addClass('scaleUp');
$(this).addClass('scaleDown');
});Stack Overflow用户
发布于 2013-05-09 15:10:12
试试这个：
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');
});下面是CSS：
.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;
}这里有一个你可以尝试的小提琴：http://jsfiddle.net/tkahn/Humu3/21/
Stack Overflow用户
发布于 2013-05-09 20:27:15
这是另一种方法，使用jQuery .animate();
$('.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 () {});
});
});这种方法有几个优点：
- 对于较旧的浏览器，它应该会优雅地降级，不透明度可能会丢失，但缩放仍然有效。
- div内的文本将随div一起缩放/隐藏。
- 边框将随div一起隐藏。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16456251
复制相关文章
相似问题
腾讯云开发者
